/* Pages intérieures de patricia-suzanne.com.
   S'appuie sur base.css (variables, polices, boutons, filet, pied de page),
   généré depuis la landing de Patricia. Tout ce qui est ici reprend ses
   choix : blanc lumineux, or pour la lumière et les détails, violet pour
   le sacré et les boutons, EB Garamond pour la voix, Mulish pour
   l'information. */

/* ---- En-tête ---------------------------------------------------------- */
.ps-entete {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 16px 32px;
  background: rgba(255, 253, 250, .86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(122, 88, 173, .12);
}
.admin-bar .ps-entete { top: 32px; }
.ps-marque {
  font-family: var(--serif);
  font-size: 1.12rem;
  letter-spacing: 1.6px;
  color: var(--encre);
  text-decoration: none;
}
.ps-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 26px;
}
.ps-nav a {
  font-size: .74rem;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--encre-douce);
  text-decoration: none;
  transition: color .25s ease;
}
.ps-nav a:hover,
.ps-nav a:focus-visible { color: var(--violet); outline: none; }
.ps-nav a[aria-current="page"] { color: var(--violet-profond); }
.ps-nav .ps-nav-bouton {
  color: #fffdfa;
  background: var(--violet);
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 1.2px;
  box-shadow: 0 6px 22px rgba(122, 88, 173, .25), 0 0 0 1px rgba(227, 179, 79, .35);
  transition: background .25s ease, transform .25s ease;
}
.ps-nav .ps-nav-bouton:hover,
.ps-nav .ps-nav-bouton:focus-visible { background: var(--violet-profond); color: #fffdfa; transform: translateY(-1px); }

/* Sur l'accueil : posée sur le bandeau doré, sans fond ni filet, elle ne
   suit pas le défilement. Les liens passent au violet profond pour tenir
   le contraste sur l'or. */
.ps-accueil .ps-entete {
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  padding: 22px 36px;
}
.ps-accueil.admin-bar .ps-entete { top: 32px; }
.ps-accueil .ps-marque { color: var(--violet-profond); }
.ps-accueil .ps-nav a { color: var(--violet-profond); }
.ps-accueil .ps-nav a:hover,
.ps-accueil .ps-nav a:focus-visible { color: var(--violet); }
.ps-accueil .ps-nav .ps-nav-bouton { color: #fffdfa; }
.ps-accueil .ps-nav .ps-nav-bouton:hover,
.ps-accueil .ps-nav .ps-nav-bouton:focus-visible { color: #fffdfa; }

/* ---- Bandeau ---------------------------------------------------------- */
.ps-bandeau {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: 104px 28px 118px;
  background:
    radial-gradient(ellipse 90% 120% at 50% -10%,
      #fffef8 0%, #fff8db 14%, #fdefb6 30%, #f8e29a 44%,
      #f3dba6 58%, #f1dcc4 72%, #f2e6f2 86%, var(--lumiere) 100%);
}
.ps-bandeau-lumiere {
  position: absolute;
  left: 50%; top: -30%;
  width: min(760px, 120vw); height: 120%;
  transform: translateX(-50%);
  background: radial-gradient(50% 60% at 50% 30%, rgba(255,255,255,.62) 0%, rgba(255,255,255,.22) 45%, rgba(255,255,255,0) 100%);
  filter: blur(30px);
  pointer-events: none;
}
.ps-bandeau-raccord {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(255,253,250,0) 0%, var(--lumiere) 100%);
  pointer-events: none;
}
.ps-bandeau-contenu { position: relative; max-width: 760px; margin: 0 auto; }
.ps-surtitre {
  font-size: .72rem;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 22px;
}
.ps-titre {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.22;
  color: var(--violet-profond);
  max-width: 18ch;
  margin: 0 auto;
}
.ps-chapeau {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.2vw, 1.22rem);
  line-height: 1.72;
  color: var(--encre-douce);
  max-width: 52ch;
  margin: 26px auto 0;
}

/* ---- Contenu ---------------------------------------------------------- */
.ps-contenu {
  max-width: 680px;
  margin: 0 auto;
  padding: 24px 28px 96px;
}
.ps-contenu > * + * { margin-top: 22px; }
.ps-contenu p {
  font-family: var(--serif);
  font-size: clamp(1.02rem, 2.1vw, 1.12rem);
  line-height: 1.78;
  color: var(--encre);
}
.ps-contenu p.ps-douce,
.ps-contenu .ps-douce p { color: var(--encre-douce); }
.ps-contenu p.ps-sans,
.ps-contenu .ps-sans p {
  font-family: var(--sans);
  font-size: .93rem;
  line-height: 1.75;
  color: var(--encre-douce);
}
.ps-contenu p.ps-centre,
.ps-contenu .ps-centre { text-align: center; }
.ps-contenu a { color: var(--violet); text-decoration-color: rgba(122, 88, 173, .4); text-underline-offset: 4px; }
.ps-contenu a:hover { color: var(--violet-profond); }
.ps-contenu strong { font-weight: 600; color: var(--violet-profond); }
.ps-contenu em { color: var(--encre-douce); }

.ps-contenu h2 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(1.5rem, 3.6vw, 2.05rem);
  line-height: 1.34;
  color: var(--violet-profond);
  text-align: center;
  max-width: 30ch;
  margin: 92px auto 30px;
}
.ps-contenu .filet + h2,
.ps-contenu h2:first-child { margin-top: 0; }
.ps-contenu h3 {
  font-family: var(--serif);
  font-weight: normal;
  font-size: clamp(1.12rem, 2.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--violet);
  margin: 40px 0 10px;
}
.ps-contenu .filet { margin: 96px auto 44px; }

/* Listes : un point d'or, pas de puce standard. */
.ps-contenu ul,
.ps-contenu ol { list-style: none; padding: 0; margin-top: 18px; }
.ps-contenu ul li,
.ps-contenu ol li {
  position: relative;
  padding-left: 30px;
  font-family: var(--serif);
  font-size: clamp(1rem, 2.1vw, 1.08rem);
  line-height: 1.72;
  color: var(--encre);
}
.ps-contenu li + li { margin-top: 12px; }
.ps-contenu ul li::before {
  content: "";
  position: absolute;
  left: 8px; top: .78em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--or);
}
.ps-contenu ol { counter-reset: ps-etape; }
.ps-contenu ol li { padding-left: 46px; }
.ps-contenu ol li + li { margin-top: 20px; }
.ps-contenu ol li::before {
  counter-increment: ps-etape;
  content: counter(ps-etape);
  position: absolute;
  left: 0; top: .1em;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(227, 179, 79, .7);
  color: var(--or-profond);
  font-family: var(--serif);
  font-size: .95rem;
  line-height: 28px;
  text-align: center;
}
.ps-contenu li strong { display: block; color: var(--violet-profond); font-weight: 500; }

/* Étiquette en petites capitales dorées, comme « Pour qui » sur l'accueil. */
.ps-contenu .ps-label,
.ps-contenu p.ps-label {
  font-family: var(--sans);
  font-size: .66rem;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--or-profond);
  margin: 0 0 8px;
}

/* La phrase que l'on prononce au téléphone. */
.ps-contenu .ps-parole,
.ps-contenu p.ps-parole {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.42rem);
  line-height: 1.55;
  color: var(--violet-profond);
  text-align: center;
  max-width: 38ch;
  margin: 28px auto;
}
.ps-contenu .ps-parole + .ps-parole { margin-top: 14px; }

/* Encadré, dans la matière des cartes de l'accueil. */
.ps-contenu .ps-cadre {
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(122, 88, 173, .16);
  border-radius: 15px;
  padding: 30px 32px 28px;
  margin-top: 30px;
  text-align: left;
}
.ps-contenu .ps-cadre.ps-aube { background: linear-gradient(180deg, var(--aube) 0%, rgba(255,255,255,.7) 100%); }
.ps-contenu .ps-cadre > * + * { margin-top: 14px; }
.ps-contenu .ps-cadre > h3 { margin-top: 30px; }
.ps-contenu .ps-cadre > h3:first-child { margin-top: 0; }
.ps-contenu .ps-cadre > h3 + p { margin-top: 8px; }
.ps-contenu .ps-cadre p { font-size: 1rem; }
.ps-contenu .ps-cadre p.ps-sans { font-size: .9rem; }

/* Deux colonnes (bloc Colonnes de WordPress, dont on remplace le style). */
.ps-contenu .wp-block-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
  margin-top: 30px;
}
.ps-contenu .wp-block-column > * + * { margin-top: 12px; }

/* Ce que c'est, ce que ce n'est pas. */
.ps-contenu .ps-oui li::before { background: var(--or); }
.ps-contenu .ps-non li::before { background: transparent; border: 1px solid rgba(122, 88, 173, .5); width: 5px; height: 5px; }
.ps-contenu .ps-non li { color: var(--encre-douce); }

/* Mention discrète, légale ou pratique. */
.ps-contenu p.ps-mention,
.ps-contenu .ps-mention {
  font-family: var(--sans);
  font-size: .8rem;
  font-style: italic;
  line-height: 1.65;
  color: var(--encre-douce);
}

/* Boutons de l'éditeur, dans le style du bouton de l'accueil. */
.ps-contenu .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 44px;
}
.ps-contenu .wp-block-button__link {
  display: inline-block;
  text-decoration: none;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fffdfa;
  background: var(--violet);
  padding: 13px 34px;
  border-radius: 999px;
  box-shadow: 0 8px 30px rgba(122, 88, 173, .3), 0 0 0 1px rgba(227, 179, 79, .35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.ps-contenu .wp-block-button__link:hover,
.ps-contenu .wp-block-button__link:focus-visible {
  background: var(--violet-profond);
  color: #fffdfa;
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(122, 88, 173, .4), 0 0 0 1px rgba(227, 179, 79, .6);
  outline: none;
}
.ps-contenu .is-style-outline .wp-block-button__link,
.ps-contenu .ps-secondaire .wp-block-button__link {
  color: var(--violet);
  background: transparent;
  box-shadow: 0 0 0 1px rgba(122, 88, 173, .45);
}
.ps-contenu .is-style-outline .wp-block-button__link:hover,
.ps-contenu .ps-secondaire .wp-block-button__link:hover {
  color: var(--violet-profond);
  background: var(--violet-clair);
  box-shadow: 0 0 0 1px rgba(122, 88, 173, .7);
}

/* Le portrait de l'accueil, repris sur la page À propos. */
.ps-contenu .portrait { margin-top: 10px; }

/* ---- Formulaires (Contact Form 7, Bookly) ------------------------------ */
.ps-contenu .wpcf7 { margin-top: 30px; }
.ps-contenu .wpcf7 p { font-family: var(--sans); font-size: .9rem; color: var(--encre-douce); }
.ps-contenu .wpcf7 label { display: block; }
.ps-contenu .wpcf7 label > span:first-child,
.ps-contenu .ps-champ {
  display: block;
  font-family: var(--sans);
  font-size: .68rem;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: var(--or-profond);
  margin-bottom: 8px;
}
.ps-contenu .wpcf7 input[type="text"],
.ps-contenu .wpcf7 input[type="email"],
.ps-contenu .wpcf7 textarea {
  width: 100%;
  font-family: var(--sans);
  font-size: .96rem;
  color: var(--encre);
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(122, 88, 173, .22);
  border-radius: 14px;
  padding: 14px 20px;
  transition: border-color .3s ease, box-shadow .3s ease;
}
.ps-contenu .wpcf7 textarea { min-height: 180px; resize: vertical; }
.ps-contenu .wpcf7 input:focus,
.ps-contenu .wpcf7 textarea:focus {
  outline: none;
  border-color: rgba(227, 179, 79, .8);
  box-shadow: 0 0 0 3px rgba(227, 179, 79, .16);
}
.ps-contenu .wpcf7 .wpcf7-list-item { margin: 0; }
.ps-contenu .wpcf7 .wpcf7-list-item label { display: flex; gap: 12px; align-items: flex-start; font-family: var(--sans); font-size: .86rem; line-height: 1.6; color: var(--encre-douce); }
.ps-contenu .wpcf7 input[type="checkbox"] { margin-top: 5px; accent-color: var(--violet); }
.ps-contenu .wpcf7 input[type="submit"] {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fffdfa;
  background: var(--violet);
  border: none;
  border-radius: 999px;
  padding: 14px 34px;
  cursor: pointer;
  box-shadow: 0 8px 30px rgba(122, 88, 173, .3), 0 0 0 1px rgba(227, 179, 79, .35);
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.ps-contenu .wpcf7 input[type="submit"]:hover { background: var(--violet-profond); transform: translateY(-2px); }
.ps-contenu .wpcf7 .wpcf7-spinner { display: none; }
/* Sans la feuille de Contact Form 7, ses zones lectrices d'écran et sa zone
   de réponse s'afficheraient à vide : on reprend ce que sa feuille faisait. */
.ps-contenu .wpcf7 .screen-reader-response {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); margin: -1px;
}
.ps-contenu .wpcf7 form .wpcf7-response-output { display: none; }
.ps-contenu .wpcf7 form.sent .wpcf7-response-output,
.ps-contenu .wpcf7 form.failed .wpcf7-response-output,
.ps-contenu .wpcf7 form.invalid .wpcf7-response-output,
.ps-contenu .wpcf7 form.unaccepted .wpcf7-response-output,
.ps-contenu .wpcf7 form.aborted .wpcf7-response-output,
.ps-contenu .wpcf7 form.spam .wpcf7-response-output { display: block; }
.ps-contenu .wpcf7 form > p + p { margin-top: 22px; }
.ps-contenu .wpcf7 fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.ps-contenu .wpcf7 .wpcf7-form-control-wrap { display: block; }
.ps-contenu .wpcf7 .wpcf7-not-valid-tip { font-family: var(--sans); font-size: .8rem; color: #9e5836; margin-top: 6px; }
.ps-contenu .wpcf7 .wpcf7-response-output {
  margin: 22px 0 0;
  padding: 14px 20px;
  border: 1px solid rgba(227, 179, 79, .6);
  border-radius: 12px;
  font-family: var(--sans);
  font-size: .9rem;
  color: var(--violet-profond);
  background: #fbf6e6;
}
.ps-contenu .wpcf7 form.sent .wpcf7-response-output { border-color: rgba(122, 88, 173, .4); background: var(--violet-clair); }

.ps-contenu .ps-bookly { margin-top: 30px; }

/* ---- Écrans étroits --------------------------------------------------- */
@media (max-width: 760px) {
  .ps-entete { padding: 14px 20px; justify-content: center; text-align: center; }
  .ps-accueil .ps-entete { padding: 16px 20px; }
  .ps-nav { justify-content: center; gap: 6px 18px; }
  .ps-nav a { font-size: .68rem; letter-spacing: 1.2px; }
  .ps-bandeau { padding: 76px 24px 96px; }
  .ps-contenu { padding: 12px 24px 72px; }
  .ps-contenu h2 { margin-top: 72px; }
  .ps-contenu .filet { margin: 72px auto 36px; }
  .ps-contenu .wp-block-columns { grid-template-columns: 1fr; }
  .ps-contenu .ps-cadre { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-nav a, .ps-contenu .wp-block-button__link { transition: none; }
}