/* ==========================================================================
   INTIMLY — COUCHE DE COMPOSANTS (site vitrine)
   Transpose le design system des apps (Journal / Accords) sur WordPress.
   Tout est portée par `body.intimly-ds` : désactiver le plugin = tout redevient
   comme avant, aucun contenu n'est touché.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. SOCLE — typographie et fond
   -------------------------------------------------------------------------- */

body.intimly-ds {
  font-family: var(--intimly-font-sans);
  font-size: var(--intimly-fs-body);
  line-height: var(--intimly-lh-texte);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Couleur de texte et fond de page en `:where()` : toute section Elementor
   ayant son propre fond ou sa propre couleur reste intacte. */
body.intimly-ds:where(body) {
  color: var(--intimly-encre);
  background-color: var(--intimly-fond);
}

/* Famille et rythme : imposés (c'est le cœur de l'harmonisation typographique). */
body.intimly-ds h1,
body.intimly-ds h2,
body.intimly-ds h3,
body.intimly-ds h4,
body.intimly-ds h5,
body.intimly-ds .elementor-heading-title {
  font-family: var(--intimly-font-serif);
  font-weight: 600;
  line-height: var(--intimly-lh-titre);
  letter-spacing: -0.01em;
}

/* COULEUR DES TITRES — spécificité calibrée à (0,0,2). À NE PAS MODIFIER SANS
   RELIRE CE QUI SUIT.

   Objectif : recolorer en bordeaux les titres laissés à la couleur par défaut,
   sans jamais écraser un choix contextuel du thème ou d'Elementor.

   ⚠️ La version précédente s'écrivait `body.intimly-ds :where(h1, …)` et le
   commentaire affirmait « donc spécificité 0 ». C'était FAUX, et ça a causé un
   bug bien visible : `:where()` neutralise la spécificité de son CONTENU, pas
   celle du reste du sélecteur. `body` (élément) + `.intimly-ds` (classe) pèsent
   toujours (0,1,1) — exactement le même poids que les règles contextuelles du
   thème, du type `.top4box h3 { color:#fff }`. À poids égal, c'est la feuille
   chargée en dernier qui gagne : la nôtre (priorité 20). Résultat, les trois
   encarts bordeaux de l'accueil affichaient un titre bordeaux sur fond bordeaux,
   illisible jusqu'au survol. Même mécanique sur le pied de page, le bloc
   newsletter et « popular services », tous en blanc sur fond coloré.

   Le calibrage retenu :
     · `html` + `body`            → deux éléments, soit (0,0,2)
     · `:where(.intimly-ds)`      → portée conservée, poids nul
     · `:where(h1, …)`            → poids nul

   (0,0,2) bat les règles nues du thème (`h3 { color:#333 }`, en (0,0,1)) — donc
   l'harmonisation typographique reste effective — et perd contre toute règle
   contextuelle en (0,1,1) ou plus, c'est-à-dire contre chaque endroit où le
   thème ou Elementor a délibérément choisi une couleur de titre.

   Constaté et corrigé le 29/07/2026 après signalement d'Eryel. */
html body:where(.intimly-ds) :where(h1, h2, h3, h4, h5, .elementor-heading-title) {
  color: var(--intimly-bordeaux);
}

body.intimly-ds h1 { font-size: var(--intimly-fs-h1); }
body.intimly-ds h2 { font-size: var(--intimly-fs-h2); }
body.intimly-ds h3 { font-size: var(--intimly-fs-h3); }
body.intimly-ds h4 { font-size: var(--intimly-fs-h4); }

/* Titre de héros — plus grand, réservé à la première section d'une page */
body.intimly-ds .intimly-display,
body.intimly-ds .intimly-hero h1,
body.intimly-ds .intimly-hero .elementor-heading-title {
  font-size: var(--intimly-fs-display);
  font-weight: 700;
}

body.intimly-ds p { margin: 0 0 var(--intimly-space-sm); }

body.intimly-ds .intimly-lead,
body.intimly-ds .intimly-hero p {
  font-size: var(--intimly-fs-lead);
  color: var(--intimly-encre-70);
  max-width: 60ch;
}

/* LIENS — même calibrage de spécificité que les titres, et pour la même raison.
   La couleur part en (0,0,2) : elle bat `a { color:… }` du thème mais s'efface
   devant toute règle contextuelle (`.pp_topstrip a`, `.footer a`, `.contactdetail a`…),
   c'est-à-dire partout où le thème pose un lien clair sur un fond coloré.
   Avant correction, la barre supérieure affichait des liens bordeaux sur fond
   bordeaux et le pied de page des liens bordeaux sur fond presque noir.
   Les propriétés non colorimétriques restent, elles, imposées. */
html body:where(.intimly-ds) :where(a) {
  color: var(--intimly-bordeaux);
}
html body:where(.intimly-ds) :where(a:hover) {
  color: var(--intimly-bordeaux-fonce);
}
body.intimly-ds a {
  text-decoration-color: rgba(154, 12, 52, 0.35);
  text-underline-offset: 0.2em;
  transition: color var(--intimly-transition);
}

/* Le « eyebrow » : capitales espacées dorées au-dessus des titres de section */
body.intimly-ds .intimly-eyebrow {
  display: block;
  font-family: var(--intimly-font-sans);
  font-size: var(--intimly-fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--intimly-ls-eyebrow);
  text-transform: uppercase;
  /* Sur fond clair, le doré ne tient pas : #D4A574 sur le rose pâle donne
     1,81:1, illisible pour un label de 12 px. On passe au bordeaux (6,9:1).
     Le doré reste la couleur du même label sur les sections wine (plus bas),
     où il conserve son rôle d'accent. */
  color: var(--intimly-bordeaux);
  margin-bottom: var(--intimly-space-xs);
}

/* --------------------------------------------------------------------------
   2. BOUTONS — pilule, identiques à .btn-primary / .btn-secondary des apps
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-btn,
body.intimly-ds .elementor-button,
body.intimly-ds .wp-block-button__link,
body.intimly-ds button.wpforms-submit,
body.intimly-ds input[type="submit"],
body.intimly-ds .wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--intimly-font-sans);
  font-size: var(--intimly-fs-body);
  font-weight: 600;
  line-height: 1.2;
  padding: 0.75rem 1.5rem;
  border-radius: var(--intimly-radius-pill);
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--intimly-transition),
              color var(--intimly-transition),
              border-color var(--intimly-transition),
              transform var(--intimly-transition),
              box-shadow var(--intimly-transition);
}

/* Couleurs de bouton en `:where()` : un bouton dont la couleur a été choisie
   dans Elementor (le doré « Prendre RDV », par exemple) la conserve.
   Ce qu'on impose vraiment, c'est la FORME : la pilule, comme dans les apps. */
body.intimly-ds :where(.intimly-btn, .elementor-button, .wp-block-button__link,
                       button.wpforms-submit, input[type="submit"], .wp-element-button) {
  background-color: var(--intimly-bordeaux);
  color: var(--intimly-blanc);
}

body.intimly-ds .intimly-btn:hover,
body.intimly-ds .elementor-button:hover,
body.intimly-ds .wp-block-button__link:hover,
body.intimly-ds button.wpforms-submit:hover,
body.intimly-ds input[type="submit"]:hover {
  background-color: var(--intimly-bordeaux-fonce);
  color: var(--intimly-blanc);
  transform: translateY(-1px);
  box-shadow: var(--intimly-shadow);
}

body.intimly-ds .intimly-btn:focus-visible,
body.intimly-ds .elementor-button:focus-visible,
body.intimly-ds input[type="submit"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--intimly-dore);
}

/* Variante secondaire : contour bordeaux, se remplit au survol */
body.intimly-ds .intimly-btn--secondaire,
body.intimly-ds .elementor-button.intimly-btn--secondaire,
body.intimly-ds .is-style-outline .wp-block-button__link {
  background-color: transparent;
  border-color: var(--intimly-bordeaux);
  color: var(--intimly-bordeaux);
}
body.intimly-ds .intimly-btn--secondaire:hover,
body.intimly-ds .elementor-button.intimly-btn--secondaire:hover,
body.intimly-ds .is-style-outline .wp-block-button__link:hover {
  background-color: var(--intimly-bordeaux);
  color: var(--intimly-blanc);
}

/* Variante dorée : pour les appels à l'action sur fond bordeaux */
body.intimly-ds .intimly-btn--dore,
body.intimly-ds .elementor-button.intimly-btn--dore {
  background-color: var(--intimly-dore);
  color: var(--intimly-bordeaux-fonce);
}
body.intimly-ds .intimly-btn--dore:hover,
body.intimly-ds .elementor-button.intimly-btn--dore:hover {
  background-color: #C4915F;
  color: var(--intimly-bordeaux-fonce);
}

/* Variante discrète : lien-bouton sans fond */
body.intimly-ds .intimly-btn--lien {
  background: transparent;
  color: var(--intimly-bordeaux);
  padding-left: 0;
  padding-right: 0;
}
body.intimly-ds .intimly-btn--lien:hover {
  background: transparent;
  color: var(--intimly-bordeaux-fonce);
  transform: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   3. CARTES — rayon 1.25rem, fond blanc, ombre teintée wine
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-card {
  background-color: var(--intimly-fond-carte);
  border-radius: var(--intimly-radius);
  padding: var(--intimly-space-md);
  box-shadow: var(--intimly-shadow-sm);
  transition: box-shadow var(--intimly-transition), transform var(--intimly-transition);
}

body.intimly-ds .intimly-card--liftable:hover {
  box-shadow: var(--intimly-shadow);
  transform: translateY(-2px);
}

/* Carte accentuée : filet doré à gauche (encadrés « à retenir ») */
body.intimly-ds .intimly-card--accent {
  border-left: 4px solid var(--intimly-dore);
}

/* Carte de vigilance : filet bordeaux (encadrés « quand consulter ») */
body.intimly-ds .intimly-card--vigilance {
  border-left: 4px solid var(--intimly-bordeaux);
  background-color: var(--intimly-rose-pale-60);
}

/* --------------------------------------------------------------------------
   4. PASTILLES D'ICÔNES — le motif visuel signature des cartes
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-pastille {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--intimly-radius-pill);
  background-color: var(--intimly-rose-pale);
  margin-bottom: var(--intimly-space-sm);
  flex-shrink: 0;
}
body.intimly-ds .intimly-pastille img,
body.intimly-ds .intimly-pastille svg { width: 1.75rem; height: 1.75rem; }

body.intimly-ds .intimly-pastille--doree { background-color: rgba(212, 165, 116, 0.22); }
body.intimly-ds .intimly-pastille--wine  { background-color: var(--intimly-bordeaux); }
body.intimly-ds .intimly-pastille--grande { width: 5rem; height: 5rem; }
body.intimly-ds .intimly-pastille--grande img { width: 2.5rem; height: 2.5rem; }

/* --------------------------------------------------------------------------
   5. CHIPS / BADGES
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: var(--intimly-radius-pill);
  background-color: var(--intimly-rose-pale);
  color: var(--intimly-bordeaux);
  font-size: var(--intimly-fs-small);
  font-weight: 500;
  line-height: 1.6;
}
body.intimly-ds .intimly-chip--dore {
  background-color: rgba(212, 165, 116, 0.22);
  color: var(--intimly-bordeaux-fonce);
}

/* --------------------------------------------------------------------------
   6. SECTIONS — rythme vertical et bande d'appel à l'action
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-section {
  padding-top: var(--intimly-space-section);
  padding-bottom: var(--intimly-space-section);
}

body.intimly-ds .intimly-section--blanche { background-color: var(--intimly-blanc); }
body.intimly-ds .intimly-section--rose    { background-color: var(--intimly-rose-pale); }

/* Bande CTA en dégradé wine — texte clair par-dessus */
body.intimly-ds .intimly-section--wine {
  background: var(--intimly-degrade-wine);
  color: var(--intimly-blanc);
  border-radius: var(--intimly-radius-lg);
}
body.intimly-ds .intimly-section--wine h1,
body.intimly-ds .intimly-section--wine h2,
body.intimly-ds .intimly-section--wine h3,
body.intimly-ds .intimly-section--wine .elementor-heading-title,
body.intimly-ds .intimly-section--wine p { color: var(--intimly-blanc); }
body.intimly-ds .intimly-section--wine .intimly-eyebrow { color: var(--intimly-dore); }
body.intimly-ds .intimly-section--wine a:not(.intimly-btn) {
  color: var(--intimly-dore);
}

/* En-tête de section centré */
body.intimly-ds .intimly-section-head {
  max-width: var(--intimly-content-narrow);
  margin-inline: auto;
  text-align: center;
  margin-bottom: var(--intimly-space-lg);
}
body.intimly-ds .intimly-section-head p { color: var(--intimly-encre-70); }

/* --------------------------------------------------------------------------
   7. FORMULAIRES (natifs, Elementor Forms, WPForms)
   -------------------------------------------------------------------------- */

body.intimly-ds input[type="text"],
body.intimly-ds input[type="email"],
body.intimly-ds input[type="tel"],
body.intimly-ds input[type="url"],
body.intimly-ds input[type="number"],
body.intimly-ds input[type="date"],
body.intimly-ds input[type="password"],
body.intimly-ds input[type="search"],
body.intimly-ds select,
body.intimly-ds textarea,
body.intimly-ds .elementor-field-textual,
body.intimly-ds .wpforms-field-medium {
  width: 100%;
  font-family: var(--intimly-font-sans);
  font-size: var(--intimly-fs-body);
  color: var(--intimly-encre);
  background-color: var(--intimly-blanc);
  border: 1px solid var(--intimly-encre-15);
  border-radius: var(--intimly-radius-sm);
  padding: 0.75rem 1rem;
  transition: border-color var(--intimly-transition), box-shadow var(--intimly-transition);
}

body.intimly-ds input:focus,
body.intimly-ds select:focus,
body.intimly-ds textarea:focus,
body.intimly-ds .elementor-field-textual:focus {
  outline: none;
  border-color: var(--intimly-bordeaux);
  box-shadow: 0 0 0 1px var(--intimly-bordeaux);
}

body.intimly-ds ::placeholder { color: var(--intimly-encre-40); }

body.intimly-ds label,
body.intimly-ds .elementor-field-label,
body.intimly-ds .wpforms-field-label {
  font-family: var(--intimly-font-sans);
  font-size: var(--intimly-fs-small);
  font-weight: 600;
  color: var(--intimly-encre-80);
}

/* --------------------------------------------------------------------------
   8. ACCORDÉONS / FAQ
   -------------------------------------------------------------------------- */

body.intimly-ds .elementor-accordion .elementor-accordion-item,
body.intimly-ds .elementor-toggle .elementor-toggle-item {
  border: none;
  border-radius: var(--intimly-radius);
  background-color: var(--intimly-blanc);
  box-shadow: var(--intimly-shadow-sm);
  margin-bottom: var(--intimly-space-xs);
  overflow: hidden;
}

body.intimly-ds .elementor-accordion .elementor-tab-title,
body.intimly-ds .elementor-toggle .elementor-tab-title {
  font-family: var(--intimly-font-serif);
  font-size: var(--intimly-fs-h4);
  font-weight: 600;
  color: var(--intimly-bordeaux);
  padding: var(--intimly-space-sm) var(--intimly-space-md);
  background: transparent;
}

body.intimly-ds .elementor-accordion .elementor-tab-content,
body.intimly-ds .elementor-toggle .elementor-tab-content {
  border: none;
  padding: 0 var(--intimly-space-md) var(--intimly-space-md);
  color: var(--intimly-encre-80);
}

/* --------------------------------------------------------------------------
   9. CITATIONS / TÉMOIGNAGES
   -------------------------------------------------------------------------- */

body.intimly-ds blockquote,
body.intimly-ds .intimly-citation {
  font-family: var(--intimly-font-serif);
  font-size: var(--intimly-fs-h4);
  font-style: italic;
  line-height: 1.5;
  color: var(--intimly-bordeaux);
  background-color: var(--intimly-blanc);
  border-left: 4px solid var(--intimly-dore);
  border-radius: var(--intimly-radius);
  padding: var(--intimly-space-md);
  margin: var(--intimly-space-md) 0;
  box-shadow: var(--intimly-shadow-sm);
}
body.intimly-ds blockquote cite {
  display: block;
  margin-top: var(--intimly-space-xs);
  font-family: var(--intimly-font-sans);
  font-size: var(--intimly-fs-small);
  font-style: normal;
  font-weight: 600;
  color: var(--intimly-encre-60);
}

/* --------------------------------------------------------------------------
   10. EN-TÊTE ET NAVIGATION
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-header {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  box-shadow: var(--intimly-shadow-sm);
}

body.intimly-ds .intimly-header .intimly-logo img { height: 40px; width: auto; }

body.intimly-ds .elementor-nav-menu .elementor-item,
body.intimly-ds .intimly-nav a {
  font-family: var(--intimly-font-sans);
  font-size: var(--intimly-fs-small);
  font-weight: 500;
  color: var(--intimly-encre-80);
  text-decoration: none;
  transition: color var(--intimly-transition);
}

body.intimly-ds .elementor-nav-menu .elementor-item:hover,
body.intimly-ds .elementor-nav-menu .elementor-item.elementor-item-active,
body.intimly-ds .intimly-nav a:hover,
body.intimly-ds .intimly-nav .current-menu-item > a {
  color: var(--intimly-bordeaux);
}

/* Soulignement doré de l'onglet actif */
body.intimly-ds .elementor-nav-menu .elementor-item.elementor-item-active::after,
body.intimly-ds .intimly-nav .current-menu-item > a::after {
  content: '';
  display: block;
  height: 2px;
  border-radius: 2px;
  background-color: var(--intimly-dore);
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   11. PIED DE PAGE
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-footer {
  background: var(--intimly-degrade-wine);
  color: var(--intimly-blanc);
  padding-top: var(--intimly-space-xl);
  padding-bottom: var(--intimly-space-lg);
}
body.intimly-ds .intimly-footer a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
body.intimly-ds .intimly-footer a:hover { color: var(--intimly-dore); }
body.intimly-ds .intimly-footer h4 {
  color: var(--intimly-dore);
  font-size: var(--intimly-fs-eyebrow);
  font-family: var(--intimly-font-sans);
  font-weight: 600;
  letter-spacing: var(--intimly-ls-eyebrow);
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   12. BANDEAU ÉCOSYSTÈME (site ↔ Accords ↔ Journal ↔ Pro)
   Miroir du hub écosystème présent dans les deux apps.
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-eco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--intimly-space-sm);
}

body.intimly-ds .intimly-eco__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  background-color: var(--intimly-blanc);
  border-radius: var(--intimly-radius);
  padding: var(--intimly-space-md);
  box-shadow: var(--intimly-shadow-sm);
  text-decoration: none;
  color: var(--intimly-encre);
  transition: box-shadow var(--intimly-transition), transform var(--intimly-transition);
}
body.intimly-ds .intimly-eco__item:hover {
  box-shadow: var(--intimly-shadow);
  transform: translateY(-2px);
}
body.intimly-ds .intimly-eco__item img { width: 2.5rem; height: 2.5rem; }
body.intimly-ds .intimly-eco__titre {
  font-family: var(--intimly-font-serif);
  font-size: var(--intimly-fs-h4);
  font-weight: 600;
  color: var(--intimly-bordeaux);
}
body.intimly-ds .intimly-eco__desc {
  font-size: var(--intimly-fs-small);
  color: var(--intimly-encre-70);
  line-height: 1.5;
}
body.intimly-ds .intimly-eco__item--bientot { opacity: 0.65; pointer-events: none; }

/* --------------------------------------------------------------------------
   13. MOTIF DES CERCLES ENTRELACÉS (fond décoratif discret)
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-motif {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
body.intimly-ds .intimly-motif::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -20%;
  right: -10%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(212, 165, 116, 0.35);
}
body.intimly-ds .intimly-motif::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: -12%;
  right: 4%;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  border: 1px solid rgba(154, 12, 52, 0.18);
}
@media (max-width: 767px) {
  body.intimly-ds .intimly-motif::before,
  body.intimly-ds .intimly-motif::after { display: none; }
}

/* --------------------------------------------------------------------------
   14. UTILITAIRES
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-grille-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--intimly-space-md); }
body.intimly-ds .intimly-grille-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--intimly-space-md); }
body.intimly-ds .intimly-centre   { text-align: center; }
body.intimly-ds .intimly-etroit   { max-width: var(--intimly-content-narrow); margin-inline: auto; }

/* Lien d'évitement — accessibilité clavier */
body.intimly-ds .intimly-skip-link {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 0.75rem 1.5rem;
  background: var(--intimly-bordeaux);
  color: #fff;
  border-radius: 0 0 var(--intimly-radius-sm) 0;
}
body.intimly-ds .intimly-skip-link:focus { left: 0; top: 0; }

/* --------------------------------------------------------------------------
   15. BLOC ÉCOSYSTÈME INJECTÉ (avant le pied de page)
   -------------------------------------------------------------------------- */

body.intimly-ds .intimly-eco-bloc {
  border-top: 1px solid rgba(154, 12, 52, 0.10);
}
body.intimly-ds .intimly-eco-wrap {
  max-width: var(--intimly-content-width);
  margin-inline: auto;
  padding-inline: var(--intimly-space-sm);
}
body.intimly-ds .intimly-eco-bloc .intimly-section-head { margin-bottom: var(--intimly-space-md); }
body.intimly-ds .intimly-eco-bloc .intimly-eco__item { align-items: center; text-align: center; }

/* ==========================================================================
   16. CORRECTIFS CIBLÉS DU THÈME psyclone-pro (29/07/2026)
   Deux défauts identifiés à l'inspection du DOM. Les sélecteurs ci-dessous
   sont volontairement précis : ils ne touchent QUE ces deux endroits.
   ========================================================================== */

/* --- 16.1 · Titres du diaporama d'accueil ---------------------------------
   Le héros est un Nivo Slider fourni par le thème (pas un widget Elementor).
   Le thème impose Poppins 700 sur `.nivo-caption h2`, ce qui était le dernier
   endroit du site à ne pas suivre la typographie de marque.
   On rétablit Playfair Display, comme dans les apps.                        */

body.intimly-ds .nivo-caption h1,
body.intimly-ds .nivo-caption h2,
body.intimly-ds .nivo-caption h3,
body.intimly-ds .nivo-html-caption h1,
body.intimly-ds .nivo-html-caption h2,
body.intimly-ds .nivo-html-caption h3 {
  font-family: var(--intimly-font-serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: var(--intimly-lh-titre);
}

/* La couleur reste celle du thème (blanc sur photo) : on ne la touche pas. */

/* --- 16.2 · Bloc doré de la barre supérieure ------------------------------
   `.header-request-quote::after` est un pseudo-élément de plus de 2200 px
   dont le seul rôle est de faire « saigner » le doré jusqu'au bord droit de
   la fenêtre. Résultat : le bandeau bordeaux semblait coupé en plein milieu.
   On neutralise ce débordement et on redonne au bouton la forme pilule du
   design system.                                                            */

body.intimly-ds .header-request-quote::after {
  display: none !important;
}

body.intimly-ds .header-request-quote {
  border-radius: var(--intimly-radius-pill);
  overflow: hidden;
  margin-block: 0.75rem;
}

body.intimly-ds .header-request-quote a {
  color: var(--intimly-bordeaux-fonce);
  font-weight: 600;
  text-decoration: none;
}

body.intimly-ds .header-request-quote:hover {
  background-color: #C4915F;
}

/* --- 16.3 · Lockup d'en-tête ---------------------------------------------
   Le logo du header faisait 40 px de haut mais restait illisible car le
   lettrage « Intimly » y était minuscule. Le lockup horizontal livré par
   Claude Design le remplace avantageusement.                                */

body.intimly-ds .logo-and-menu .logo img,
body.intimly-ds .intimly-header .intimly-logo img {
  height: 44px;
  width: auto;
  max-width: none;
}

/* ==========================================================================
   17 · WIDGET « APPEL À L'ACTION » ELEMENTOR — FIN DES BANDES NOIRES
   ==========================================================================
   Constat (audit du 29/07/2026, pages Ressources) : chaque carte de
   catégorie est un widget Elementor « Call to Action ». Son conteneur
   d'image `.elementor-cta__bg` est réglé par défaut sur

       background-size : contain;
       background-color: #1A1A1A;

   Les visuels de catégorie sont en 16/9 (1024 × 559) alors que la boîte est
   en ~2,4/1 (570 × 237). En `contain`, l'image est réduite jusqu'à tenir en
   entier, et les ~68 px restants de chaque côté laissent apparaître le fond
   noir du widget. Sur un site rose pâle, deux barres noires par carte.

   Correction : passer en `cover` (l'image remplit la boîte, le débord est
   rogné haut/bas — les motifs sont centrés, ils survivent au recadrage) et
   remplacer le noir par le crème des médaillons Claude Design (#FDF7F1),
   de sorte que même un futur visuel mal proportionné se fonde dans la page.

   `!important` est nécessaire : Elementor écrit ces deux propriétés en style
   inline sur l'élément. C'est la seule exception de la feuille.

   ⚠️ Si un jour un visuel doit VRAIMENT être affiché en entier sans
   recadrage, retirer cette règle et corriger plutôt le ratio de l'image
   source — ne pas revenir à `contain` avec un fond noir.
   -------------------------------------------------------------------------- */

body.intimly-ds .elementor-cta__bg,
body.intimly-ds .elementor-cta .elementor-bg {
  background-size: cover !important;
  background-position: center center !important;
  background-color: #FDF7F1 !important;
}

/* Le survol d'Elementor zoome le fond ; on garde l'effet mais on l'adoucit
   pour rester dans le registre « lent » du reste du design system.          */
body.intimly-ds .elementor-cta:hover .elementor-cta__bg {
  transition: transform 600ms ease;
}

/* --- 16.4 · Bandeau supérieur — le bouton « Prendre RDV » -----------------
   Téléphone et e-mail du bandeau étaient illisibles (1,04:1). La cause n'était
   pas dans cette feuille : l'option de thème `headertopfontcolor` valait
   #8C2F39, sur un bandeau #9A0C34. Corrigé À LA SOURCE, dans les options du
   thème, en rose pâle de la charte → 6,9:1. Aucune règle CSS ici : la règle
   générée par le thème porte `!important`, une surcharge d'ici n'aurait servi
   à rien. Si le bandeau redevient illisible, c'est cette option qu'il faut
   regarder (Apparence → Theme Options → couleur du texte du bandeau).

   Reste un cas que l'option ne peut pas traiter : elle colore d'un seul geste
   `.infobox` (sur le bordeaux) ET `.top-align-right a` — c'est-à-dire le
   bouton « Prendre RDV », lui posé sur le doré. Une seule valeur ne peut pas
   convenir aux deux fonds. Le rose pâle y tomberait à 1,81:1, d'où cette
   unique règle, en `!important` puisqu'elle doit passer devant celle du thème
   qui en porte un : bordeaux foncé sur doré → 5,47:1.                       */

body.intimly-ds .pp_topstrip .header-request-quote a,
body.intimly-ds .pp_topstrip .top-align-right .header-request-quote a {
  color: var(--intimly-bordeaux-fonce) !important;
}

/* --- 16.5 · Deux textes clairs posés sur des fonds clairs -----------------
   Trouvés par l'audit de contraste, tous deux invisibles pour la même raison
   que les titres des 3 boîtes de l'accueil : une couleur de texte décidée
   sans regarder le fond sur lequel elle atterrit.

   1. Le bouton « En savoir plus » des cartes Elementor. Le widget « Appel à
      l'action » impose #3F444B au libellé via `.elementor-cta--skin-classic
      .elementor-cta__button` (0,3,0), qui passe devant la règle générique de
      boutons d'ici (0,1,1). Le fond du bouton étant le bordeaux de la charte,
      le libellé tombait à 1,16:1. On monte à (0,4,1) — pas d'`!important`,
      juste la spécificité qu'il faut.

   2. L'onglet actif des blocs à onglets. Fond doré (réglage global Elementor),
      libellé blanc par défaut du widget : 2,23:1. On redéfinit la variable du
      widget plutôt que la couleur, pour rester dans sa mécanique.            */

body.intimly-ds .elementor-cta--skin-classic .elementor-cta__button.elementor-button,
body.intimly-ds .elementor-cta--skin-cover .elementor-cta__button.elementor-button,
body.intimly-ds .elementor-cta .elementor-cta__button.elementor-button {
  color: var(--intimly-blanc);
}

body.intimly-ds .elementor-widget-n-tabs .e-n-tab-title[aria-selected="true"],
body.intimly-ds .e-n-tabs .e-n-tab-title[aria-selected="true"] {
  --n-tabs-title-color-active: var(--intimly-bordeaux-fonce);
  --n-tabs-title-color-hover: var(--intimly-bordeaux-fonce);
}


/* Titres de colonnes du pied de page
   Ils etaient en h5, ce qui creait un saut de niveau depuis les h2 du contenu
   sur chacune des pages du site. Passes en h3 dans footer.php, ils reprennent
   ici la taille qu ils avaient, y compris au palier tablette du theme.
   La colonne 1 garde sa regle propre (.footer-highlight, 35px). */
.footer .widget-column-2 h3,
.footer .widget-column-3 h3,
.footer .widget-column-4 h3 {
	font-size: 27px;
	line-height: 1.2;
}

@media screen and (max-width: 1169px) and (min-width: 768px) {
	.footer .widget-column-2 h3,
	.footer .widget-column-3 h3,
	.footer .widget-column-4 h3 {
		font-size: 24px;
	}
}


/* Titres de cartes de l accueil
   Ils etaient en h4 sous un h2 de section : passes en h3 dans les gabarits,
   ils reprennent ici leur taille d origine. */
body.intimly-ds .top6boxbg h3,
body.intimly-ds .services-title h3 {
	font-size: 20px;
	line-height: 24px;
}

.services-title h3 {
	margin-bottom: 15px;
}


/* Icones sociales du pied de page (19/10/2026)
   Le CSS additionnel du Personnalisateur impose Open Sans a tout lien du pied de page
   (.footer a, !important), ce qui efface les glyphes Font Awesome des trois liens
   sociaux portes directement par la balise a (classe fab). Specificite superieure
   pour rendre la police d icones a ces liens seulement. */
html body.intimly-ds .footer a.fab,
html body.intimly-ds .footer a.fab::before {
	font-family: "Font Awesome 5 Brands" !important;
	font-weight: 400;
}

/* Titre du diaporama d accueil sur mobile et tablette (19/10/2026)
   Le titre du diaporama est un h1 depuis le 09/09 (unique H1 de l accueil), mais
   les regles mobiles du theme (responsive.css) ne reduisent que les h2 : a 390 px
   le titre debordait du diaporama et passait sous la barre du logo. Memes valeurs
   que celles du theme pour h2, appliquees au h1. */
@media screen and (max-width: 767px) {
	body.intimly-ds .nivo-caption h1 {
		margin: 0 0 5px;
		font-size: 22px !important;
		line-height: 30px !important;
	}
}
@media screen and (min-width: 420px) and (max-width: 767px) {
	body.intimly-ds .nivo-caption h1 {
		margin-bottom: 15px;
		font-size: 24px !important;
		line-height: 28px !important;
	}
}
@media screen and (min-width: 768px) and (max-width: 980px) {
	body.intimly-ds .nivo-caption h1 {
		font-size: 35px !important;
		line-height: 40px !important;
	}
}

/* Polices Google du theme remplacees par Montserrat auto-hebergee (19/10/2026)
   Le style.css du theme importait Open Sans, Poppins, Teko et Oswald depuis
   fonts.googleapis.com (adresse IP des visiteurs transmise a Google, en
   contradiction avec la politique de confidentialite). Les imports sont
   desactives dans le theme ; ces quatre noms pointent ici vers les fichiers
   Montserrat deja servis par cette extension (fonts.css). */
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin-ext.woff2") format("woff2"); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Teko"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../fonts/montserrat-latin.woff2") format("woff2"); }