/* Idole Studio · noyau (pages Idole v3, aperçu de l'éditeur, pages qui contiennent un widget Idole).
   Toutes les règles sont scopées par une classe idole-* : rien ne change sur le reste du site.
   Mise en page : dans les données Elementor. Ici : variables, en-tête au-dessus des sections sombres,
   classes utilitaires, curseur, focus, effets de boutons. */

:root {
  --idole-noir: #0B0B0B;
  --idole-blanc: #FFFFFF;
  --idole-clair: #F2F2F2;
  --idole-gris: #9A9A9A;
  --idole-attenue: #5C5C5C;
  --idole-orange: #F59139;
  --idole-orange-fonce: #D9742A;
  --idole-ease: cubic-bezier(.7, 0, .2, 1);
  --idole-marge: 20px;
  --idole-hh: 60px;
  /* Thème clair par défaut ; les sections sombres (classe idole-dark) redéfinissent ces valeurs */
  --idole-fond: #FFFFFF;
  --idole-fg: #0B0B0B;
  --idole-muted: #5C5C5C;
  --idole-line: rgba(0, 0, 0, .12);
  --idole-bg: #FFFFFF; /* fond sous les mots en contour (posé par idole-core.js sur chaque .idole-contour) */
}
@media (min-width: 768px) { :root { --idole-marge: 32px; } }
@media (min-width: 1280px) { :root { --idole-marge: 48px; --idole-hh: 72px; } }

.idole-dark { --idole-bg: #0B0B0B; }
.idole-dark,
.idole-header.is-over-dark,
.idole-header.idole-menu-ouvert {
  --idole-fond: #0B0B0B;
  --idole-fg: #F2F2F2;
  --idole-muted: #9A9A9A;
  --idole-line: rgba(255, 255, 255, .14);
}

/* ---------- Page ---------- */
body.idole-v3 {
  background-color: #FFFFFF;
  color: #0B0B0B;
  font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
html:has(> body.idole-v3) { scroll-padding-top: calc(var(--idole-hh) + 16px); }
/* La page passe au-dessus de la statue (fixe, z-index 0) ; les sections sombres ont un fond opaque. */
body.idole-v3 > .elementor { position: relative; z-index: 1; }
.idole-v3 :focus-visible { outline: 2px solid var(--idole-orange); outline-offset: 3px; }
/* Titres sur mobile : un mot long (Syne 800) ne déborde jamais de l'écran ; césure française (page en lang="fr").
   Ordinateur et tablette : aucune césure. */
@media (max-width: 767px) {
  body.idole-v3 h1, body.idole-v3 h2 { overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
}
/* Paragraphes de l'Éditeur de texte : la remise à zéro du thème est retirée sur les pages Idole, on la remet ici
   (pas de marge au-dessus, 1em entre deux paragraphes, rien après le dernier ; « Espacement des paragraphes » reste prioritaire) */
.idole-v3 .elementor-widget-text-editor :is(p, ul, ol, dl) { margin-top: 0; margin-bottom: var(--paragraph-spacing, 1em); }
.idole-v3 .elementor-widget-text-editor :is(p, ul, ol, dl):last-child { margin-bottom: 0; }

/* ---------- En-tête (conteneur portant la classe idole-header) au-dessus d'une section sombre ----------
   Même rendu quand le menu mobile du widget idole-menu est ouvert (classe idole-menu-ouvert). Le contenu des panneaux
   du mega menu (.idole-menu__panneau, fond blanc) n'est jamais concerné. */
.idole-header { transition: background-color .3s, border-color .3s, color .3s; }
.idole-header .elementor-widget-image img { transition: filter .3s; }
.idole-header:is(.is-over-dark, .idole-menu-ouvert) {
  background-color: #0B0B0B !important;
  background-image: none !important;
  border-color: rgba(255, 255, 255, .14) !important;
  color: #F2F2F2;
}
.idole-header.idole-menu-ouvert { border-color: transparent !important; }
.idole-header:is(.is-over-dark, .idole-menu-ouvert) .elementor-widget-image:not(.idole-menu__panneau *) img { filter: invert(1); }
.idole-header:is(.is-over-dark, .idole-menu-ouvert) :is(.elementor-heading-title, .elementor-heading-title a, .elementor-nav-menu--main .elementor-item, .elementor-menu-toggle, .elementor-icon-list-text, .elementor-text-editor, .elementor-widget-text-editor):not(.idole-menu__panneau *) { color: #F2F2F2 !important; }
.idole-header:is(.is-over-dark, .idole-menu-ouvert) :is(.elementor-menu-toggle svg, .elementor-icon svg):not(.idole-menu__panneau *) { fill: #F2F2F2 !important; }

/* ---------- Classes utilitaires ---------- */
/* Mot accentué des titres : lettres en contour. Le remplissage, peint par-dessus le trait, prend la couleur du fond
   (--idole-bg, calculée par idole-core.js) : il masque la moitié intérieure du trait et les recouvrements des glyphes. */
.idole-contour {
  font-style: normal;
  -webkit-text-stroke: 2px currentColor;
  -webkit-text-fill-color: var(--idole-bg, #FFFFFF);
  paint-order: stroke fill;
}
@media (max-width: 767px) { .idole-contour { -webkit-text-stroke-width: 1.5px; } }
/* Ancienne classe (graisse 500), gardée pour compatibilité */
.idole-500 { font-weight: 500; font-style: normal; }
/* Point d'interrogation orange (question du pied de page) */
.idole-q { display: inline-block; color: var(--idole-orange); font-weight: 500; font-style: normal; }
/* Filet 1 px en haut de section, sur la largeur du contenu (::after : ::before sert au voile d'arrière-plan) */
.e-con.idole-rule::after,
.elementor-section.idole-rule::after {
  content: ""; position: absolute; z-index: 1; top: 0; left: 50%;
  width: min(calc(100% - 2 * var(--idole-marge)), 1380px);
  transform: translateX(-50%);
  border-top: 1px solid var(--idole-line);
  pointer-events: none;
}
/* Lien souligné orange (widget Titre avec lien, Éditeur de texte) */
.idole-lien a, a.idole-lien {
  text-decoration: underline 2px var(--idole-orange);
  text-underline-offset: 6px;
  transition: text-underline-offset .3s var(--idole-ease);
}
.idole-lien a:hover, a.idole-lien:hover { text-underline-offset: 3px; }
.idole-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Boutons natifs : remplissage par le bas et flèche au survol ----------
   Classe idole-btn-anim (Avancé > Classes CSS du widget Bouton) ; idole-btn-fantome en plus pour un bouton
   à contour (remplissage de la couleur du texte). Laisser vide la couleur de fond au survol du bouton. */
.idole-btn-anim .elementor-button {
  position: relative; isolation: isolate; overflow: hidden;
  transition: color .45s var(--idole-ease), border-color .45s var(--idole-ease);
}
.idole-btn-anim .elementor-button::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit;
  background: var(--idole-btn-fill, var(--idole-orange-fonce));
  transform: translateY(102%);
  transition: transform .5s var(--idole-ease);
}
.idole-btn-anim .elementor-button:hover::before,
.idole-btn-anim .elementor-button:focus-visible::before { transform: none; }
.idole-btn-anim .elementor-button-text::after {
  content: "→"; display: inline-block; width: 0; overflow: hidden; opacity: 0; vertical-align: top;
  transform: translateX(-8px);
  transition: width .45s var(--idole-ease), margin .45s var(--idole-ease), opacity .3s, transform .45s var(--idole-ease);
}
.idole-btn-anim .elementor-button:hover .elementor-button-text::after,
.idole-btn-anim .elementor-button:focus-visible .elementor-button-text::after { width: 1em; margin-left: 10px; opacity: 1; transform: none; }
.idole-btn-fantome { --idole-btn-fill: var(--idole-fg); }
.idole-btn-fantome .elementor-button:hover,
.idole-btn-fantome .elementor-button:focus-visible { color: var(--idole-fond) !important; border-color: var(--idole-fg) !important; }

/* ---------- Curseur (pointeur fin, ordinateur) : libellé lu dans data-cursor (Avancé > Attributs) ---------- */
.idole-cursor {
  position: fixed; left: 0; top: 0; z-index: 90;
  width: 72px; height: 72px; margin: -36px 0 0 -36px; border-radius: 50%;
  background: var(--idole-orange); color: var(--idole-noir);
  display: flex; align-items: center; justify-content: center;
  font: 500 13px/1 "DM Sans", "Helvetica Neue", Arial, sans-serif;
  pointer-events: none; opacity: 0;
  transition: background-color .3s, color .3s;
}
.idole-cursor span { opacity: 0; white-space: nowrap; }
/* Sur un fond orange (classe posée par idole-core.js) : disque noir, libellé blanc */
.idole-cursor.is-sur-orange { background: var(--idole-noir); color: var(--idole-blanc); }

/* ---------- FAQ (widget Accordéon natif) : le + tourne et devient une croix ----------
   Une seule icône (la fermée) au lieu de l'échange plus / croix d'Elementor. */
.idole-v3 .elementor-accordion .elementor-tab-title .elementor-accordion-icon-opened { display: none !important; }
.idole-v3 .elementor-accordion .elementor-tab-title .elementor-accordion-icon-closed {
  display: flex !important; align-items: center; justify-content: center;
  transition: transform .5s var(--idole-ease);
}
.idole-v3 .elementor-accordion .elementor-tab-title.elementor-active .elementor-accordion-icon-closed { transform: rotate(135deg); }
.idole-has-cursor [data-cursor], .idole-has-cursor [data-cursor] * { cursor: none; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .idole-v3 *, .idole-v3 *::before, .idole-v3 *::after { transition-duration: .01ms !important; }
}