/* =========================================================
   pp-content.css
   Paroisse de Poissy — contenu Gutenberg.

   REMPLACE pp-blocs.css, pp-editor-blocks.css et la quasi-totalite
   de pp-editor.css. Un seul fichier pour le site ET l'apercu de
   l'editeur : plus de regle a reporter d'un fichier a l'autre.

   PORTEE
     site   : .pp-contenu, classe posee sur le widget
              « Contenu de la publication » du modele Elementor.
     admin  : .editor-styles-wrapper.
   Les deux sont listes ensemble via :is(). Seules les sections 1
   et 4 les separent, parce que la structure du DOM y differe
   reellement (.is-root-container n'existe que dans l'editeur).

   SPECIFICITE
     :is(.pp-contenu, .editor-styles-wrapper) vaut (0,1,0).
     Les regles d'element atteignent donc (0,1,1), les composants
     (0,2,0). Voir l'en-tete de pp-patterns.css.

   Depend de pp-tokens.css et des variables du bloc styles.css
   de theme.json, tous deux charges avant.
   ========================================================= */


/* =========================================================
   PORTAGE — deux regimes, a respecter en ajoutant des regles.

   REGLES DE CONTENU (titres, paragraphes, liens, images, blocs
   natifs) : portees par :is(.pp-contenu, .editor-styles-wrapper).
   Elles ne doivent s'appliquer qu'au contenu Gutenberg, jamais aux
   sections construites en Elementor.

   COMPOSANTS (.pp-cta, .pp-carte, .pp-lien, .pp-personne, .pp-perm,
   .pp-btn--*, .pp-gallery, .pp-media-video) : SANS portage. Leurs classes sont assez
   specifiques pour se passer d'un conteneur, et surtout elles doivent
   survivre la ou .pp-contenu n'est pas pose — un autre modele
   Elementor, un widget sans la classe, un aperçu. Les avoir portees a
   fait sauter toute leur mise en forme sur le site.

   Les egalites de specificite (0,1,1) entre « :is(...) h3 » et
   « .pp-cta h3 » sont tranchees par l'ordre : les composants sont
   ecrits apres, ils gagnent. Ne pas remonter ces sections.
   ========================================================= */


/* =========================================================
   1. LARGEUR ET RYTHME

   :not(.elementor) epargne les pages construites en Elementor.
   Une seule largeur pour tout le contenu : --pp-wrap.
   ========================================================= */

.pp-contenu,
.editor-styles-wrapper {
  font-family: var(--pp-font);
  font-size: var(--pp-body);
  line-height: var(--pp-lh);
  color: var(--pp-navy);
}

.pp-contenu:has(> *:not(.elementor)),
.pp-contenu:has(> .elementor-widget-container > *:not(.elementor)) {
  padding-block: 80px;
}

.pp-contenu > *:not(.elementor),
.pp-contenu > .elementor-widget-container > *:not(.elementor),
.editor-styles-wrapper .is-root-container > * {
  max-width: var(--pp-wrap);
  margin-inline: auto;
  padding-inline: var(--pp-gutter);
}

.pp-contenu > * + *,
.editor-styles-wrapper .is-root-container > * + * {
  margin-top: var(--pp-space-s);
}


/* =========================================================
   2. TYPOGRAPHIE
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) h2 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.2;
  margin-top: var(--pp-space-m);
  margin-bottom: var(--pp-space-xs);
}

:is(.pp-contenu, .editor-styles-wrapper) h3 {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: .5rem;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-chapo {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 500;
}

:is(.pp-contenu, .editor-styles-wrapper) a {
  color: var(--pp-blue);
}


/* =========================================================
   3. CITATION

   .pp-citation est la classe historique, posee a la main.
   .wp-block-quote est le bloc natif ouvert aux benevoles.
   Meme rendu, quelle que soit la saisie.
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) :is(.pp-citation, .wp-block-quote) {
  border: 0;
  border-left: 3px solid var(--pp-saffron);
  border-radius: 0;
  padding: 4px 0 4px 26px;
  margin-block: var(--pp-space-m);
}

:is(.pp-contenu, .editor-styles-wrapper) :is(.pp-citation, .wp-block-quote) p {
  font-size: 19px;
  line-height: 1.6;
  font-weight: 500;
  margin: 0;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-quote p + p {
  margin-top: var(--pp-space-xs);
}

/* Attribution — meme traitement que les surtitres */
:is(.pp-contenu, .editor-styles-wrapper) .wp-block-quote cite {
  display: block;
  margin-top: 14px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-muted);
}


/* =========================================================
   4. IMAGES ET ALIGNEMENTS
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-image img {
  border-radius: var(--pp-radius);
  width: 100%;
  height: auto;
}

:is(.pp-contenu, .editor-styles-wrapper) figcaption {
  font-size: 13.5px;
  color: var(--pp-muted);
  margin-top: 10px;
  text-align: left;
}

/* Alignement gauche / droite

   Un element flottant ignore margin-inline: auto. Le retrait est
   donc calcule a la main :
     (largeur du conteneur - largeur du contenu) / 2   -> bord du bloc
     + une gouttiere                                   -> bord du texte
   max(0px, ...) evite un retrait negatif sur les petits ecrans.

   Le padding-inline herite de la section 1 est remis a zero : il
   est deja pris en compte dans le calcul. */

.pp-contenu > .alignleft,
.pp-contenu > .elementor-widget-container > .alignleft,
.editor-styles-wrapper .is-root-container > .alignleft {
  float: left;
  max-width: calc(var(--pp-wrap) * .35);
  padding-inline: 0;
  margin-block: 6px var(--pp-space-s);
  margin-left: calc(max(0px, (100% - var(--pp-wrap)) / 2) + var(--pp-gutter));
  margin-right: 32px;
}

.pp-contenu > .alignright,
.pp-contenu > .elementor-widget-container > .alignright,
.editor-styles-wrapper .is-root-container > .alignright {
  float: right;
  max-width: calc(var(--pp-wrap) * .35);
  padding-inline: 0;
  margin-block: 6px var(--pp-space-s);
  margin-right: calc(max(0px, (100% - var(--pp-wrap)) / 2) + var(--pp-gutter));
  margin-left: 32px;
}

/* Seuls les paragraphes s'enroulent autour du flottant. Un titre ou
   un bloc de mise en page repart toujours sur une ligne propre. */

:is(.pp-contenu, .editor-styles-wrapper) :is(
  h2, h3, h4,
  .wp-block-columns,
  .wp-block-media-text,
  .wp-block-embed,
  .wp-block-buttons
) {
  clear: both;
}


/* =========================================================
   5. MEDIA + TEXTE

   A privilegier sur l'image flottante des que le visuel
   accompagne plusieurs paragraphes : deux colonnes stables,
   sans reenroulement imprevisible a chaque correction.
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-media-text {
  margin-block: var(--pp-space-m);
  grid-template-columns: 50% 1fr;
  gap: 0;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-media-text__media img {
  border-radius: var(--pp-radius);
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-media-text__content {
  padding: 0 0 0 40px;
}

:is(.pp-contenu, .editor-styles-wrapper) .has-media-on-the-right .wp-block-media-text__content {
  padding: 0 40px 0 0;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-media-text :where(h2, h3, h4) {
  margin-top: 0;
}

/* Variante fond creme — encarts type « Nos lieux » */
:is(.pp-contenu, .editor-styles-wrapper) .wp-block-media-text.has-pp-cream-background-color {
  border-radius: var(--pp-radius);
  overflow: hidden;
  padding: 28px;
}


/* =========================================================
   6. COLONNES
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-columns {
  margin-block: var(--pp-space-m);
  gap: 40px;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-columns :where(h2, h3, h4):first-child {
  margin-top: 0;
}


/* =========================================================
   7. INTEGRATIONS — YouTube et Vimeo

   Ratio 16/9 impose : evite le saut de mise en page au
   chargement de l'iframe.
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-embed {
  margin-block: var(--pp-space-m);
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-embed__wrapper {
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: var(--pp-navy);
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}


/* =========================================================
   8. ICONES

   Reseaux sociaux : cercle contour, pas d'aplat de couleur.
   core/icon : le SVG herite de currentColor.
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-social-links {
  margin-block: var(--pp-space-s);
  gap: 12px;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-social-link {
  width: 40px;
  height: 40px;
  border: 1px solid var(--pp-navy);
  border-radius: 50%;
  background: transparent;
  color: var(--pp-navy);
  transition: .18s ease;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-social-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  color: inherit;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-social-link:hover {
  background: var(--pp-navy);
  color: var(--pp-white);
}

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-icon {
  color: var(--pp-navy);
}


/* =========================================================
   9. CARTES DOUBLES  (page « La paroisse »)
   ========================================================= */

.pp-duo {
  gap: 20px;
  margin-block: var(--pp-space-s) var(--pp-space-m);
}

.pp-carte {
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 22px;
  height: 100%;
  transition: border-color .18s ease;
}

.pp-carte:hover {
  border-color: var(--pp-navy);
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-carte__img {
  margin: 0 0 18px;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-carte__img img {
  border-radius: var(--pp-radius-sm);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.pp-carte h3 {
  margin: 0;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-carte__sur {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--pp-blue);
  margin: 6px 0 12px;
}

.pp-carte p {
  font-size: 15.5px;
}


/* =========================================================
   10. ACCES RAPIDES
   ========================================================= */

.pp-quatuor {
  gap: 14px;
  margin-block: var(--pp-space-s) var(--pp-space-m);
}

.pp-lien {
  background: var(--pp-cream);
  border-radius: var(--pp-radius);
  padding: 22px 20px;
  height: 100%;
  transition: background .18s ease;
}

.pp-lien:hover {
  background: var(--pp-cream-dark);
}

.pp-lien h3 {
  font-size: 19px;
  margin: 0 0 8px;
}

.pp-lien h3 a {
  color: var(--pp-navy);
  text-decoration: none;
}

.pp-lien h3 a::after {
  content: " \2192";
  color: var(--pp-saffron);
  display: inline-block;
  transition: transform .18s ease;
}

.pp-lien:hover h3 a::after {
  transform: translateX(4px);
}

.pp-lien p {
  font-size: 14.5px;
  color: var(--pp-muted);
  line-height: 1.55;
  margin: 0;
}


/* =========================================================
   11. TROMBINOSCOPE  (page « Les pretres »)
   ========================================================= */

.pp-trombi {
  gap: 16px;
  margin-block: var(--pp-space-s);
}

.pp-personne {
  background: var(--pp-white);
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius);
  padding: 24px 20px;
  height: 100%;
  text-align: center;
  transition: border-color .18s ease;
}

.pp-personne:hover {
  border-color: var(--pp-navy);
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__photo {
  margin: 0 auto 16px;
  width: 104px;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__photo img {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  border: 3px solid var(--pp-cream);
}

.pp-personne h3 {
  font-size: 18px;
  line-height: 1.25;
  margin: 0;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__role {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pp-blue);
  line-height: 1.4;
  margin: 8px 0 14px;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__mail {
  margin: 0;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__mail a {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  color: var(--pp-navy);
  text-decoration: none;
  border: 1px solid var(--pp-line);
  border-radius: var(--pp-radius-pill);
  padding: 7px 18px;
  transition: .18s ease;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__mail a::before {
  content: "\2709";
  margin-right: 7px;
  color: var(--pp-saffron);
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__mail a:hover {
  background: var(--pp-navy);
  border-color: var(--pp-navy);
  color: var(--pp-white);
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-personne__mail a:hover::before {
  color: var(--pp-saffron);
}


/* =========================================================
   12. PERMANENCES
   ========================================================= */

.pp-permanences {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 12px;
  margin-block: var(--pp-space-s) var(--pp-space-m);
}

.pp-perm {
  background: var(--pp-cream);
  border-left: 3px solid var(--pp-saffron);
  border-radius: 0 var(--pp-radius) var(--pp-radius) 0;
  padding: 20px 22px;
}

.pp-perm p {
  margin: 0;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-perm__jour {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pp-muted);
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-perm__heure {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-perm__lieu {
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 8px;
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-perm__note {
  font-size: 12.5px;
  color: var(--pp-muted);
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--pp-navy) 10%, transparent);
}

:is(.pp-contenu, .editor-styles-wrapper) .pp-perm__note--limite {
  color: var(--pp-amber-text);
}


/* =========================================================
   13. ENCART APPEL A L'ACTION

   Une seule variante : l'encart est toujours sur fond bleu
   profond. La declinaison .pp-cta--navy a ete supprimee, elle
   ne faisait que redire ce que .pp-cta pose deja.

   Le bouton est inverse — fond blanc, texte bleu — pour se
   detacher du fond sans reprendre le safran des boutons
   courants.
   ========================================================= */

.pp-cta {
  background: var(--pp-navy);
  color: var(--pp-white);
  border-radius: var(--pp-radius);
  padding: 34px 36px;
  margin-block: var(--pp-space-m);
}

.pp-cta h3 {
  color: var(--pp-white);
  font-size: 24px;
  margin: 0 0 12px;
}

/* Pas de max-width ici : la mesure de lecture est deja portee par
   la largeur de l'encart. Un 62ch cassait la ligne bien avant le
   bord de la carte. */
.pp-cta p {
  color: var(--pp-on-navy);
  font-size: 16px;
  margin: 0 0 22px;
}

.pp-cta .wp-block-button__link {
  background: var(--pp-white);
  color: var(--pp-blue);
}

.pp-cta .wp-block-button__link:hover,
.pp-cta .wp-block-button__link:focus-visible {
  background: var(--pp-saffron);
  color: var(--pp-navy);
}

/* Reseaux sociaux sur fond bleu profond */
.pp-cta .wp-social-link {
  border-color: var(--pp-white);
  color: var(--pp-white);
}


/* =========================================================
   14. BOUTONS
   ========================================================= */

:is(.pp-contenu, .editor-styles-wrapper) .wp-block-button__link {
  border-radius: var(--pp-radius-pill);
  padding: 12px 26px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: .18s ease;
}

.pp-btn--plein .wp-block-button__link {
  background: var(--pp-saffron);
  color: var(--pp-navy);
  border: 0;
}

.pp-btn--plein .wp-block-button__link:hover {
  background: var(--pp-saffron-light);
}

.pp-btn--ligne .wp-block-button__link {
  background: transparent;
  color: var(--pp-navy);
  border: 1.5px solid var(--pp-navy);
}

.pp-btn--ligne .wp-block-button__link:hover {
  background: var(--pp-navy);
  color: var(--pp-white);
}


/* =========================================================
   15. GALERIE PHOTO  —  shortcode [pp_gallery]

   Composant, donc sans portage : la galerie est rendue par un
   widget Shortcode du modele Elementor « media », ou .pp-contenu
   n'est pas pose.

   --pp-gallery-cols est ecrit en style inline par le shortcode a
   partir de l'attribut « columns ». La valeur de repli couvre le
   cas d'un balisage ecrit a la main.

   .pp-gallery figcaption atteint (0,1,1), a egalite avec la regle
   figcaption de la section 4. Ecrite apres, elle gagne — meme
   arbitrage que pour les autres composants.
   ========================================================= */

.pp-gallery {
  display: grid;
  grid-template-columns: repeat(var(--pp-gallery-cols, 3), 1fr);
  gap: 16px;
  margin-block: var(--pp-space-m);
}

.pp-gallery-figure {
  margin: 0;
}

.pp-gallery-link {
  display: block;
  overflow: hidden;
  border-radius: var(--pp-radius);
  background: var(--pp-cream);
}

.pp-gallery-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .18s ease;
}

.pp-gallery-link:hover .pp-gallery-img {
  transform: scale(1.04);
}

.pp-gallery-link:focus-visible {
  outline: 2px solid var(--pp-blue);
  outline-offset: 3px;
}

.pp-gallery figcaption {
  font-size: 13px;
  color: var(--pp-muted);
  margin-top: 8px;
  text-align: left;
}

/* Le zoom au survol n'apporte rien a qui a demande moins
   d'animation, et gene ceux que le mouvement incommode. */
@media (prefers-reduced-motion: reduce) {

  .pp-gallery-img {
    transition: none;
  }

  .pp-gallery-link:hover .pp-gallery-img {
    transform: none;
  }
}


/* =========================================================
   16. LECTEUR VIDEO  —  shortcode [pp_media_body]

   Composant, donc sans portage : rendu par un widget Shortcode
   du modele Elementor « media », ou .pp-contenu n'est pas pose.

   Le ratio est porte par le conteneur et non par l'iframe : la
   hauteur est ainsi reservee des le premier rendu, sans saut de
   mise en page au chargement du lecteur. C'est le meme resultat
   que la section 7, obtenu autrement — la est sur l'iframe, qui
   est le seul element que WordPress met dans le wrapper.
   ========================================================= */

.pp-media-video {
  aspect-ratio: 16 / 9;
  border-radius: var(--pp-radius);
  overflow: hidden;
  background: var(--pp-navy);
  margin-block: var(--pp-space-m);
}

.pp-media-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* =========================================================
   17. RESPONSIVE
   ========================================================= */

@media (max-width: 781px) {

  .pp-contenu,
  .editor-styles-wrapper { font-size: 16px; }

  :is(.pp-contenu, .editor-styles-wrapper) .pp-chapo { font-size: 18px; }

  .pp-contenu > *,
  .editor-styles-wrapper .is-root-container > * { padding-inline: 20px; }

  /* Sous 782 px, un flottant laisse une colonne de texte inutilisable */
  .pp-contenu > .alignleft,
  .pp-contenu > .alignright,
  .pp-contenu > .elementor-widget-container > .alignleft,
  .pp-contenu > .elementor-widget-container > .alignright,
  .editor-styles-wrapper .is-root-container > .alignleft,
  .editor-styles-wrapper .is-root-container > .alignright {
    float: none;
    max-width: 100%;
    padding-inline: 20px;
    margin-inline: 0;
    margin-block: 0 var(--pp-space-s);
  }

  :is(.pp-contenu, .editor-styles-wrapper) .wp-block-media-text__content,
  :is(.pp-contenu, .editor-styles-wrapper) .has-media-on-the-right .wp-block-media-text__content {
    padding: 24px 0 0;
  }

  :is(.pp-contenu, .editor-styles-wrapper) .wp-block-columns { gap: 24px; }

  :is(.pp-contenu, .editor-styles-wrapper) :is(.pp-duo, .pp-quatuor, .pp-trombi) { gap: 10px; }

  .pp-personne { padding: 18px 14px; }

  :is(.pp-contenu, .editor-styles-wrapper) .pp-personne__photo,
  :is(.pp-contenu, .editor-styles-wrapper) .pp-personne__photo img { width: 84px; height: 84px; }

  .pp-personne h3 { font-size: 16px; }

  .pp-permanences { grid-template-columns: 1fr; }

  .pp-cta { padding: 26px 22px; }

  /* Deux colonnes plutot qu'une : sur une galerie, des vignettes
     pleine largeur allongent le defilement sans rien apporter. */
  .pp-gallery { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}