/* ====================================================================
   AGNESCOLOMBO.COM — CSS PERSONNALISÉ
   ProPhoto → Settings > Advanced > Custom code > CSS
   Vérifié en direct sur le site — chaque règle sert à quelque chose.

   01. TYPOGRAPHIE MOBILE
   02. MENU
   03. PIED DE PAGE
   04. TEXTE CENTRÉ
   05. SECTIONS PLEINE HAUTEUR
   06. IMAGES
   07. BOUTONS WORDPRESS
   08. FAQ EN SHORTCODE (pages ProPhoto)
   09. FAQ EN BLOC (pages Gutenberg)
   10. COMMENTAIRES
   11. INSTAGRAM
   ==================================================================== */


/* ////////////////////////////////////////////////////////////////////
// 01. TYPOGRAPHIE MOBILE
//
// Sur téléphone uniquement : le texte des paragraphes est réduit à
// 92 % pour éviter les pavés interminables, et les sous-titres H3
// des modules ProPhoto s'adaptent à la largeur de l'écran au lieu
// d'être figés.
//////////////////////////////////////////////////////////////////// */

@media (max-width: 768px) {
  p,
  p a {
    font-size: 92% !important;
  }

  .pp-text-module-body h3 {
    font-size: 8vw !important;
  }
}


/* ////////////////////////////////////////////////////////////////////
// 02. MENU
//
// Le panneau du menu burger occupe toute la largeur de l'écran.
// Le `:not(.pp-visualbuilder)` désactive l'effet dans l'éditeur
// ProPhoto, sinon l'édition devient impraticable.
//////////////////////////////////////////////////////////////////// */

body:not(.pp-visualbuilder) .pp-slideover > .pp-block {
  width: 100vw !important;
}


/* ////////////////////////////////////////////////////////////////////
// 03. PIED DE PAGE
//
// Masque la ligne de copyright ProPhoto en bas de chaque page.
// Les 3 sélecteurs correspondent aux 3 façons dont ProPhoto génère
// ce bloc selon les pages — les 3 existent sur ton site.
//////////////////////////////////////////////////////////////////// */

.copyright-footer,
.copyright-footer p,
#user-copyright {
  display: none !important;
}


/* ////////////////////////////////////////////////////////////////////
// 04. TEXTE CENTRÉ
//
// WordPress centre le conteneur des blocs réglés en "centré", mais
// pas toujours le texte dedans. Cette règle finit le travail.
//////////////////////////////////////////////////////////////////// */

.is-content-justification-center {
  text-align: center;
}


/* ////////////////////////////////////////////////////////////////////
// 05. SECTIONS PLEINE HAUTEUR
//
// L'effet diaporama vertical de tes pages formation : chaque section
// fait toute la hauteur de l'écran, reste collée en haut pendant le
// scroll, et les sections se superposent en défilant.
//
// Sur téléphone l'effet est adouci : c'est le contenu qui reste
// collé, pas la section entière, et les sections sont allongées pour
// laisser le temps de lire.
//
// La dernière règle ne sert que dans l'éditeur ProPhoto : sans elle
// tes sections apparaissent coupées pendant que tu édites.
//////////////////////////////////////////////////////////////////// */

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
}

.pp-layout {
  position: relative;
}

.pp-block--full-height {
  min-height: 100svh;
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

@media (max-width: 768px) {
  .pp-block--full-height {
    position: relative;
    min-height: 160svh;
  }

  .pp-block--full-height .pp-column__inner {
    position: sticky;
    top: 20px;
  }
}

.pp-visualbuilder .pp-block--full-height,
.pp-visualbuilder .pp-block--full-height > .row {
  overflow: visible !important;
  max-height: none !important;
}


/* ////////////////////////////////////////////////////////////////////
// 06. IMAGES
//
// Les images des grilles ProPhoto grossissent de 5 % au survol,
// en douceur.
//
// Les légendes d'images du blog sont centrées et en 11px.
// À savoir : 11px c'est petit, et les légendes comptent en SEO
// image. Passe à 13px si tu veux qu'on les lise.
//////////////////////////////////////////////////////////////////// */

.pp-grid-image__image {
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

.pp-grid-image__image:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.wp-block-image figcaption {
  text-align: center;
  font-size: 11px;
}


/* ////////////////////////////////////////////////////////////////////
// 07. BOUTONS WORDPRESS
//
// Tous tes boutons Gutenberg : fond charbon + texte blanc, et au
// survol fond jaune + texte noir.
//
// Concerne 40 articles et 14 pages, soit 156 boutons. Uniquement les
// boutons créés dans l'éditeur WordPress — ceux dessinés dans
// ProPhoto ont d'autres classes et ne sont pas touchés.
//
// TES DEUX COULEURS, à changer ici et nulle part ailleurs :
//    charbon  #32373C     jaune  #FDD98A
//
// Le `!important` verrouille tout : changer la couleur d'un bouton
// dans l'éditeur n'aura plus d'effet. C'est le prix de "tous mes
// boutons pareils". Pour une exception un jour, il faudra une classe
// dédiée.
//
// Le `:focus` sert aux personnes qui naviguent au clavier : sans lui
// elles ne voient pas où elles sont sur la page.
//////////////////////////////////////////////////////////////////// */

.wp-block-button__link.wp-element-button,
.wp-block-button__link.wp-element-button:visited {
  background-color: #32373c !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  font-size: 17px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-button__link.wp-element-button:hover,
.wp-block-button__link.wp-element-button:focus {
  background-color: #fdd98a !important;
  color: #252525 !important;
  text-decoration: none !important;
}


/* ////////////////////////////////////////////////////////////////////
// 08. FAQ EN SHORTCODE (pages ProPhoto)
//
// NE PAS SUPPRIMER. Actif sur 5 pages, 27 questions :
//    /photo/seance-photo-ado-puteaux-paris/                  7
//    /photo/book-photo-mannequin-enfant-puteaux-paris/       6
//    /photo/photographe-corporate-la-defense/                6
//    /photo/photo-identite-reussie-puteaux/                  5
//    /photo/photographe-maternite-famille-puteaux-suresnes/  3
//
// Ces pages sont 100 % ProPhoto, donc le shortcode est la seule
// façon d'y insérer une FAQ. Le bloc de la section 09 ne peut pas
// y être posé. Les deux versions cohabitent, c'est assumé.
//
// Ce que fait cette section : cartes à coins arrondis avec une
// ombre légère, questions en Open Sans 15px sur fond gris clair,
// chevrons à la place des + / - du plugin, et questions réduites
// à 12px sur téléphone.
//
// Deux points à connaître :
// • Les 4 états de la question (normal, survol, focus, ouvert) sont
//   regroupés dans UNE règle. C'est ce qui empêche le texte de
//   sauter d'un pixel au survol. Ne les sépare pas.
// • Le bloc mobile doit rester APRÈS, sinon le 15px l'écrase.
//////////////////////////////////////////////////////////////////// */

.sp-easy-accordion .sp-ea-single {
  border: none !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(123, 123, 123, 0.35);
}

.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a,
.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a:hover,
.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a:focus,
.sp-ea-one.sp-easy-accordion .ea-card.ea-expand .ea-header a {
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  padding: 11px 37px 11px 14px !important;
  border: 0 !important;
  outline: 0 !important;
  color: #444;
  background-color: #f9f9f9;
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.sp-easy-accordion .ea-header {
  font-weight: 400 !important;
}

/* Carte ouverte : fond plus marqué, ombre plus prononcée */
.sp-ea-one .ea-card.ea-expand .ea-header a {
  background-color: #dfdede !important;
}

.sp-ea-one .ea-card.ea-expand {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

/* Chevrons — dessinés en SVG dans le CSS, aucun fichier à charger */
.sp-easy-accordion .ea-expand-icon::before {
  content: "" !important;
}

.sp-easy-accordion .ea-expand-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.sp-easy-accordion .eap-icon-ea-expand-plus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6l6 6-6 6' fill='none' stroke='%23686865' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sp-easy-accordion .eap-icon-ea-expand-minus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23686865' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a .ea-expand-icon {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  float: none !important;
}

/* La réponse */
.sp-easy-accordion .ea-body {
  font-size: calc(100% - 1px);
}

.sp-easy-accordion .ea-body p {
  margin: 0 0 1em 0 !important;
  line-height: 1.6;
}

.sp-easy-accordion .ea-body p:last-child {
  margin-bottom: 0 !important;
}

/* Les liens de la réponse prennent une allure de petit bouton.
   Attention : ça touche TOUS les liens, y compris au milieu d'une
   phrase. Pour n'en cibler que certains, mets-leur une classe et
   remplace `.ea-body a` par `.ea-body a.bouton-faq`. */
.ea-body a {
  position: relative;
  top: 12px !important;
  padding: 6px 17px;
  background-color: #f7f7f7;
  border: 1px solid #ccc;
  color: #444 !important;
}

.ea-body a:hover {
  background-color: #e7e7e7;
}

/* Mobile — doit rester en dernier dans cette section */
@media (max-width: 768px) {
  .sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a,
  .sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a:hover,
  .sp-ea-one.sp-easy-accordion .sp-ea-single .ea-header a:focus,
  .sp-ea-one.sp-easy-accordion .ea-card.ea-expand .ea-header a {
    font-size: 12px !important;
    line-height: 1.35 !important;
  }
}


/* ////////////////////////////////////////////////////////////////////
// 09. FAQ EN BLOC (pages Gutenberg)
//
// La version bloc du plugin, utilisée sur ta page FAQ, tes pages
// portrait pro, trombinoscope, cadeau ado et tes articles.
//
// Le contenu du bloc est fabriqué par le plugin, il échappe donc à
// la typo de ProPhoto : les liens retombaient sur le style de lien
// général du thème et sortaient en 20px au milieu d'un texte en
// 16px. Cette règle leur redonne la taille du texte qui les entoure.
//
// `inherit` plutôt qu'une valeur fixe : si tu changes ta typo un
// jour, ça suit tout seul.
//////////////////////////////////////////////////////////////////// */

.sp-eab-accordion-content a,
.sp-eab-accordion-body a {
  font-size: inherit !important;
  line-height: inherit !important;
  font-family: inherit !important;
}


/* ////////////////////////////////////////////////////////////////////
// 10. COMMENTAIRES
//
// Un peu d'air dans la zone commentaires des articles.
// Le `*` vise vraiment TOUT : textes, avatars, champs, boutons.
// C'est un réglage à la hache — si un jour tes commentaires ont un
// alignement bizarre, regarde ici en premier.
//////////////////////////////////////////////////////////////////// */

.article-comments-inner * {
  padding-right: 5px;
}

.comment-inner {
  margin-top: 10px;
}


/* ////////////////////////////////////////////////////////////////////
// 11. INSTAGRAM
//
// Désactive la fenêtre d'agrandissement du flux Instagram : cliquer
// sur une photo n'ouvre plus la grande image en surimpression.
// Pour rediriger le clic vers ton compte, ça se règle dans les
// options du plugin, pas ici.
//////////////////////////////////////////////////////////////////// */

#sbi_lightbox {
  display: none;
}