@charset "UTF-8";
/* ==========================================================================
   Pantin Fleurs — Atelier Nocturne
   pf-contact.css — formulaire de contact natif + section « avis Google »

   Feuille séparée, chargée par inc/pf-contact-avis.php uniquement sur les pages
   qui portent [pf_contact], [pf_avis_google] ou [pf_contact_avis].
   atelier.css n'est pas modifié : ce fichier ne contient que les classes
   .pf-form*, .pf-alerte*, .pf-contact et .pf-avis*.

   Jetons repris de la charte (déclarés dans atelier.css) :
     --encre #0d1310  --papier #f7f3ec  --laiton #c7a24c  --laiton-clair #e2c885
     --dahlia #cf4a72  --sauge #86a893  --grenat #7d1f3a  --r 2px
   Chaque var() garde une valeur de repli : la feuille reste lisible même isolée.
   ========================================================================== */

/* --- 1. Accessibilité : texte réservé aux lecteurs d'écran ------------------ */
.pf-visuellement-cache{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

/* --- 2. Conteneur du formulaire ------------------------------------------- */
.pf-contact{max-width:820px}
.pf-contact>h2,.pf-contact>h3,.pf-contact>h4{margin-top:0}

.pf-form{
  margin:0;
  font-family:var(--sans,"Karla",Arial,sans-serif);
  color:var(--texte-sombre,#17201a);
}

/* Grille : Nom et E-mail côte à côte dès 640 px, Objet et Message sur toute la largeur. */
.pf-form__grille{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2.2vw,26px);
  margin:0 0 clamp(18px,2.4vw,26px);
}
@media (min-width:640px){
  .pf-form__grille{grid-template-columns:1fr 1fr}
  .pf-champ--objet,
  .pf-champ--message{grid-column:1 / -1}
}

/* --- 3. Champs ------------------------------------------------------------ */
.pf-champ{display:flex;flex-direction:column;gap:.5em;min-width:0}

.pf-champ label{
  font-size:.78rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-sombre-doux,#4e5a51);
}
.pf-champ__requis{color:var(--grenat,#7d1f3a);margin-left:.25em}

.pf-champ input[type="text"],
.pf-champ input[type="email"],
.pf-champ input[type="tel"],
.pf-champ textarea{
  width:100%;
  font:inherit;font-size:1rem;line-height:1.6;
  color:var(--texte-sombre,#17201a);
  background:#fff;
  border:1px solid var(--trait-sombre,rgba(23,32,26,.24));
  border-radius:var(--r,2px);
  padding:.85em 1em;
  transition:border-color var(--t,.2s ease),box-shadow var(--t,.2s ease);
  -webkit-appearance:none;appearance:none;
}
.pf-champ textarea{resize:vertical;min-height:11em}

.pf-champ input::placeholder,
.pf-champ textarea::placeholder{color:#8b948c;opacity:1}

.pf-champ input:hover,
.pf-champ textarea:hover{border-color:var(--texte-sombre-doux,#4e5a51)}

/* Focus net et contrasté sur les fonds clairs de la charte. */
.pf-champ input:focus,
.pf-champ textarea:focus{
  outline:2px solid var(--grenat,#7d1f3a);
  outline-offset:2px;
  border-color:var(--grenat,#7d1f3a);
  box-shadow:none;
}
.pf-champ input:focus-visible,
.pf-champ textarea:focus-visible{outline:2px solid var(--grenat,#7d1f3a);outline-offset:2px}

/* Champ en erreur */
.pf-champ--erreur input,
.pf-champ--erreur textarea{
  border-color:var(--dahlia,#cf4a72);
  background:#fff7f9;
}
.pf-champ--erreur label{color:var(--grenat,#7d1f3a)}

.pf-champ__aide{
  margin:0;
  font-size:.82rem;
  color:var(--texte-sombre-doux,#4e5a51);
}
.pf-champ__erreur{
  margin:0;
  font-size:.86rem;font-weight:700;
  color:var(--grenat,#7d1f3a);
}
.pf-champ__erreur::before{content:"! ";font-weight:700}

/* --- 4. Pot de miel : hors écran, jamais display:none (les robots le voient) */
.pf-form__piege{
  position:absolute!important;
  left:-9999px;
  top:auto;
  width:1px;height:1px;
  overflow:hidden;
  margin:0;
}

/* --- 5. Pied du formulaire ------------------------------------------------ */
.pf-form__champs-requis{
  margin:0 0 clamp(14px,2vw,20px);
  font-size:.82rem;
}
.pf-form__pied{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:1.2em 1.8em;
}
.pf-form__pied .pf-btn{flex:none}
.pf-form__aide{
  margin:0;flex:1 1 260px;max-width:46ch;
  font-size:.88rem;
  color:var(--texte-sombre-doux,#4e5a51);
}
.pf-form__mention{
  margin:1.6em 0 0;max-width:62ch;
  font-size:.8rem;line-height:1.7;
  color:var(--texte-sombre-doux,#4e5a51);
}

/* --- 6. Messages d'état (succès / erreur) --------------------------------- */
.pf-alerte{
  margin:0 0 1.8em;
  padding:1.1em 1.3em;
  border-radius:var(--r,2px);
  border:1px solid var(--trait-sombre,rgba(23,32,26,.2));
  border-left-width:4px;
  font-size:.95rem;line-height:1.65;
}
.pf-alerte--succes{
  background:#f3f7f2;
  border-color:var(--sauge,#86a893);
  border-left-color:var(--sauge,#86a893);
  color:var(--texte-sombre,#17201a);
}
.pf-alerte--erreur{
  background:#fdf3f6;
  border-color:var(--dahlia,#cf4a72);
  border-left-color:var(--dahlia,#cf4a72);
  color:var(--texte-sombre,#17201a);
}
.pf-alerte:focus-visible{outline:2px solid var(--encre,#0d1310);outline-offset:3px}
.pf-alerte__titre{margin:0;font-weight:700}
.pf-alerte ul{margin:.7em 0 0;padding-left:1.15em}
.pf-alerte li{margin:.25em 0}
.pf-alerte a{color:var(--grenat,#7d1f3a);text-underline-offset:.2em}

/* --- 7. Section « avis Google » ------------------------------------------ */
/* Classe de bloc volontairement distincte (pf-avis-google) : des règles .pf-avis
   peuvent vivre ailleurs dans la charte, elles ne doivent pas happer ce bloc. */
.pf-avis-google{display:block}
.pf-avis-google--inline{margin-top:clamp(40px,6vw,80px);padding-top:clamp(32px,4vw,56px);border-top:1px solid var(--trait-sombre,rgba(23,32,26,.14))}
.pf-avis__wrap{position:relative}

/* Réinitialisations : le bloc ne dépend d'aucune règle voisine sur blockquote/p. */
.pf-avis__carte blockquote{background:none;border:0;padding:0;margin:0}
.pf-avis__liste{
  display:grid;
  grid-template-columns:1fr;
  gap:clamp(16px,2.2vw,26px);
  margin:clamp(24px,3.4vw,44px) 0 0;
}
@media (min-width:720px){
  .pf-avis__liste{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1060px){
  .pf-avis__liste{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* Cartes : coins 2 px, filet discret, comme le reste de la charte. */
.pf-avis__carte{
  display:flex;flex-direction:column;justify-content:space-between;gap:1.3em;
  margin:0;
  padding:clamp(20px,2.4vw,30px);
  background:#fff;
  border:1px solid var(--trait-sombre,rgba(23,32,26,.14));
  border-radius:var(--r,2px);
}
.pf-avis__texte{margin:0}
.pf-avis__texte p{
  margin:0;
  font-family:var(--serif,"Fraunces",Georgia,serif);
  font-style:normal;
  font-size:1.05rem;line-height:1.7;
  color:var(--texte-sombre,#17201a);
}
.pf-avis__meta{
  display:flex;flex-wrap:wrap;align-items:baseline;
  gap:.5em .9em;
  padding-top:1em;
  border-top:1px solid var(--trait-sombre,rgba(23,32,26,.14));
}
.pf-avis__etoiles{
  color:var(--laiton,#c7a24c);
  font-size:1.05rem;
  letter-spacing:.12em;
  line-height:1;
}
.pf-avis__auteur{
  font-weight:700;
  color:var(--texte-sombre,#17201a);
}
.pf-avis__quand,
.pf-avis__source{
  font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--texte-sombre-doux,#4e5a51);
}
.pf-avis__source::before{content:"";display:inline-block;width:6px;height:6px;margin-right:.6em;border-radius:50%;background:var(--sauge,#86a893)}

/* Bloc affiché quand aucun avis réel n'est disponible : sobre, sans chiffre. */
.pf-avis__attente{
  margin:clamp(24px,3.4vw,44px) 0 0;
  max-width:62ch;
  padding:clamp(22px,2.6vw,34px);
  background:#fff;
  border:1px dashed var(--trait-sombre,rgba(23,32,26,.28));
  border-radius:var(--r,2px);
}
.pf-avis__attente p{margin:0 0 1em}
.pf-avis__attente p:last-child{margin-bottom:0}
.pf-avis__attente-titre{
  font-family:var(--serif,"Fraunces",Georgia,serif);
  font-size:1.25rem;
  color:var(--texte-sombre,#17201a);
}
.pf-avis__attente-liens{
  display:flex;flex-wrap:wrap;gap:1em 2em;
  margin-bottom:0;
}
.pf-avis__attente-liens .pf-lien{color:var(--grenat,#7d1f3a)}
.pf-avis__note-admin{
  margin-top:1.4em!important;
  padding-top:1em;
  border-top:1px solid var(--trait-sombre,rgba(23,32,26,.14));
  font-size:.82rem;
  color:var(--texte-sombre-doux,#4e5a51);
}
.pf-avis__note-admin code{
  font-size:.9em;
  padding:.1em .35em;
  background:var(--papier-2,#efe8dc);
  border-radius:2px;
}
.pf-avis__attribution{
  margin:1.6em 0 0;
  font-size:.8rem;
  color:var(--texte-sombre-doux,#4e5a51);
}
.pf-avis__lien-fiche{margin:clamp(22px,3vw,36px) 0 0}

/* Sur une section sombre (au cas où [pf_avis_google section="0"] y serait posé). */
.pf-sombre .pf-avis__carte,
.pf-sombre .pf-avis__attente{
  background:var(--encre-2,#141d18);
  border-color:var(--trait-clair,rgba(236,230,218,.16));
}
.pf-sombre .pf-avis__texte p{color:var(--texte-clair,#ece6da)}
.pf-sombre .pf-avis__auteur{color:var(--craie,#f4efe6)}
.pf-sombre .pf-avis__quand,
.pf-sombre .pf-avis__source,
.pf-sombre .pf-avis__attribution{color:var(--texte-doux,#b9b2a4)}
.pf-sombre .pf-avis__attente-titre{color:var(--craie,#f4efe6)}
.pf-sombre .pf-avis__attente-liens .pf-lien{color:var(--laiton-clair,#e2c885)}

/* --- 8. Préférences système ---------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .pf-champ input,
  .pf-champ textarea{transition:none}
}
@media (forced-colors:active){
  .pf-champ input,
  .pf-champ textarea,
  .pf-avis__carte,
  .pf-avis__attente{border-color:CanvasText}
  .pf-champ--erreur input,
  .pf-champ--erreur textarea{border-color:Mark}
  .pf-avis__etoiles{forced-color-adjust:none}
}