/* ==========================================================================
   PRANA ADDICT · CSS complémentaire Elementor V4
   Source versionnée : piste-a-argile/css/elementor-complement.css
   Déployé dans le thème : wp-content/themes/blank/stylesheets/prana-v4.css
   Ne contient que ce que les classes globales V4 ne peuvent pas exprimer :
   balises en ligne (em, strong, i) que les styles par défaut d'Elementor refusent,
   et quelques règles descendantes documentées une à une (règle 5 de transposition).
   Les variables --color-*, --font-*, --s-* sont celles du Design System Elementor.
   ========================================================================== */

/* --- Balises en ligne (refusées par les styles par défaut : invalid_tag) -------- */

/* strong : graisse Medium 500, comme le socle (le navigateur mettrait 700) */
.elementor strong,
.elementor b {
  font-weight: 500;
}

/* em dans un titre = cp-title-accent : mot de titre en italique terracotta.
   Dans un paragraphe, em reste un simple italique (vitalisme, termes latins…). */
.elementor em {
  font-style: italic;
}

.elementor h1 em,
.elementor h2 em,
.elementor h3 em,
.elementor h4 em,
.elementor h5 em {
  color: var(--color-primary);
}

/* cp-title-accent-light : même accent sur fond sombre (rose argile).
   S'applique aux titres portant la classe globale cp-title-accent-light (étape 7). */
.elementor .cp-title-accent-light em {
  color: var(--color-quinary);
}

/* Même accent, sans classe : tout titre posé sur une surface sombre du design system
   (cp-surface-primary, -secondary, -senary, dégradé primary) passe son em en rose argile.
   Spécificité (0,2,2) : prime sur « h2 em » (0,1,2). Ajouté au lot 7a. */
.elementor .cp-surface-primary :is(h1, h2, h3, h4, h5) em,
.elementor .cp-surface-secondary :is(h1, h2, h3, h4, h5) em,
.elementor .cp-surface-senary :is(h1, h2, h3, h4, h5) em,
.elementor .color-gradient-primary :is(h1, h2, h3, h4, h5) em {
  color: var(--color-quinary);
}

/* Lien en ligne dans un texte courant = cp-accent. Les styles par défaut d'Elementor
   ne visent que les éléments atomiques rendus en <a> (.e-default-a), jamais un <a> inséré
   dans un paragraphe : d'où cette règle. Le soulignement garde la couleur du lien.
   1.7.0 : s'applique aussi aux liens des listes cp-list / cp-notice-list (formations de la page À propos). */
.elementor p a,
.elementor .cp-list li a,
.elementor .cp-notice-list li a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.25s;
}

.elementor p a:hover,
.elementor .cp-list li a:hover,
.elementor .cp-notice-list li a:hover {
  color: var(--color-secondary);
}

/* --- Listes à puces (lot 7b) ---------------------------------------------------------
   cp-list et cp-notice-list se posent sur un e-paragraph en balise span qui contient la liste
   (avec la balise p, le navigateur éjecte le ul hors du paragraphe). Elementor ne stylise pas
   les ul / li : le thème s'en charge. Puce : disque ocre de 6 px en list-style-image (SVG),
   remonté de 7 px pour se caler au milieu de la ligne. Zéro pseudo-élément. */
.elementor .cp-list ul,
.elementor .cp-notice-list ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin: 0;
  padding-left: var(--s-20);
}

.elementor .cp-list li,
.elementor .cp-notice-list li {
  list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Ccircle cx='3' cy='3' r='3' fill='%23C4904A'/%3E%3C/svg%3E");
}

/* cp-notice-list : deux colonnes dans l'encadré, une seule en mobile */
.elementor .cp-notice-list ul {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--s-8) var(--s-48);
}

.elementor .cp-notice-list li {
  flex: 0 0 calc(50% - var(--s-24));
}

@media (max-width: 767px) {
  .elementor .cp-notice-list li {
    flex-basis: 100%;
  }
}

/* --- Survols composés (lot 7c, décision 2) ------------------------------------------
   Le survol d'une carte transforme un de ses enfants : une classe V4 ne sait pas l'exprimer.
   Hooks : classes globales cp-reason, cp-invite, cp-service (racine) ; cp-cover (image qui
   remplit son enveloppe), cp-service-media, cp-service-arrow (enfants). Six règles. */
.elementor .cp-reason .cp-cover,
.elementor .cp-invite .cp-cover {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor .cp-reason:hover .cp-cover {
  transform: scale(1.06);
}

.elementor .cp-invite:hover .cp-cover {
  transform: scale(1.05);
}

.elementor .cp-service .cp-service-media {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor .cp-service:hover .cp-service-media {
  transform: scale(1.05) rotate(-3deg);
}

.elementor .cp-service:hover .cp-service-arrow {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
  transform: translateX(6px);
}

/* --- Pictogrammes et motifs (élément e-svg, SVG inséré en ligne) -------------------
   La couleur du trait vient de currentColor (classes cp-motif, cp-motif-bg ou color-*).
   L'épaisseur de trait est un attribut de la racine SVG, que seule une règle CSS posée
   sur la racine elle-même peut remplacer : d'où ces deux règles descendantes. */
.elementor .cp-motif-bg svg {
  stroke-width: 0.45;
}

.elementor .cp-icon svg {
  stroke-width: 1.25;
}

/* Focus clavier : anneau cacao ; blanc crème pour les boutons -white et, depuis 1.7.0, pour tout
   ce qui est posé sur une surface sombre du design system (cacao sur terracotta tiendrait moins de 3:1). */
.elementor :focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 3px;
}

.elementor .bt-primary-white:focus-visible,
.elementor .bt-secondary-white:focus-visible,
.elementor .bt-tertiary-white:focus-visible,
.elementor .cp-surface-primary :focus-visible,
.elementor .cp-surface-secondary :focus-visible,
.elementor .cp-surface-senary :focus-visible,
.elementor .color-gradient-primary :focus-visible {
  outline-color: var(--color-white);
}

/* Bouton désactivé : attribut disabled ou aria-disabled, communs aux sept bt-* */
.elementor [class*="bt-"][disabled],
.elementor [class*="bt-"][aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
  cursor: not-allowed;
}

/* --- Mouvement réduit (audit étape 7) ---------------------------------------------
   Les transitions et animations du design system (survols, apparitions) sont coupées
   pour qui a demandé moins de mouvement dans son système (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
  .elementor *,
  .elementor *::before,
  .elementor *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* --- Rangée glisser-défiler (étape 8 : cp-scroller-track + prana-v4.js) -------------
   Hook : classe globale cp-scroller-track (barre fine, curseur « main », scroll-snap).
   L'image d'une rangée ne doit pas se laisser tirer comme un fichier : propriété non
   standard, hors classe V4, doublée de draggable="false" sur chaque image.
   is-dragging : posée par le script pendant le geste, l'aimantation est suspendue. */
.elementor .cp-scroller-track img {
  -webkit-user-drag: none;
  user-select: none;
}

.elementor .cp-scroller-track.is-dragging {
  scroll-snap-type: none;
}

/* --- 1.9.0 (étape 9, lot C) · modules tiers posés en widgets V3 dans les pages V4 ----------
   Un widget V3 ne reçoit ni classe ni style V4 : une enveloppe e-div-block portant une classe
   globale sert de crochet (cp-cart, cp-map) et le thème habille ce qu'elle contient.
   cp-cart (cartes cadeaux, boucle de collection) : le lien .button de WooCommerce prend
   l'apparence de bt-primary + tp-button ; le lien « Voir le panier » ajouté après l'ajout
   AJAX prend celle de bt-tertiary. */
.elementor .cp-cart .button,
.woocommerce .elementor .cp-cart .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: var(--s-48);
  padding: var(--s-12) var(--s-32);
  border: var(--border-width-s) solid var(--color-primary);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body); /* 1.17.1 : l'ancienne feuille screen.css (Poppins !important) n'est plus chargée depuis l'allègement A6 */
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), color 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.elementor .cp-cart .button:hover,
.woocommerce .elementor .cp-cart .button:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.elementor .cp-cart .button:active,
.woocommerce .elementor .cp-cart .button:active {
  background-color: var(--color-senary);
  border-color: var(--color-senary);
}

.elementor .cp-cart .button.loading {
  opacity: 0.7;
}

.elementor .cp-cart .added_to_cart {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: var(--s-48);
  margin-left: var(--s-16);
  padding: var(--s-12) var(--s-0);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* cp-map (contact) : hauteur de l'iframe du widget V3 google_maps, dont le réglage de hauteur
   n'est pas généré dans un document V4 (84 vh / 50 vh / 45 vh comme la page legacy). */
.elementor .cp-map iframe {
  display: block;
  width: 100%;
  height: 84vh;
  min-height: 480px;
  border: 0;
  border-radius: var(--radius-m);
}

@media (max-width: 1024px) {
  .elementor .cp-map iframe {
    height: 50vh;
    min-height: 360px;
  }
}

@media (max-width: 767px) {
  .elementor .cp-map iframe {
    height: 45vh;
    min-height: 300px;
  }
}

/* --- 1.10.2 (étape 9, lot C) · habillage des modules tiers dans la carte cp-module ----------
   1.10.0 : habillage Bookly + PranaQuiz ; 1.10.1 : déclarations Bookly en !important, bouton « Retour » en lien tertiaire ;
   1.10.2 : libellé des boutons Bookly (span du plugin à 18 px gras) hérité du bouton, affichage des boutons laissé au plugin
   (.bookly-none et ses boutons mobiles ≤ 650 px), bouton « Retour » réellement transparent, filet de navigation, focus visible,
   étape des horaires (jours et créneaux) habillée, plus de sélecteur fourre-tout sur les boutons.
   Bookly (prendre-rendez-vous) et PranaQuiz (quizz) sont posés en widgets V3 dans une carte
   cp-module ; leur balisage est celui des plugins. Les règles ci-dessous le rapprochent des
   formulaires du design system (libellé tp-label, champ tp-field à contour cacao, réponses
   cp-choice, bouton bt-primary, lien de retour bt-tertiary). Variables du Design System. */

/* Bookly : sa couleur principale devient le terracotta du site ; ses déclarations sont marquées !important
   car la feuille tailwind du plugin pose les siennes en !important (la variable posée sur la carte
   l'emporte sur le :root !important du plugin pour tout ce qu'elle contient).
   Seuls les boutons de navigation du plugin (.bookly-btn) deviennent des pilules : pas de sélecteur
   fourre-tout button[class*="bookly"], qui habillerait aussi les créneaux horaires (.bookly-day,
   .bookly-hour) traités plus bas ; display reste sans !important pour laisser jouer .bookly-none
   (display: none !important du plugin) et l'affichage de ses boutons mobiles sous 650 px. */
.elementor .cp-module {
  --bookly-main-color: var(--color-primary);
  --bookly-color: var(--color-primary);
}

.elementor .cp-module .bookly-form,
.elementor .cp-module .bookly-form * {
  font-family: var(--font-body);
}

.elementor .cp-module .bookly-form .bookly-bold {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 1.25;
  color: var(--color-secondary);
}

.elementor .cp-module .bookly-form label,
.elementor .cp-module .bookly-form .bookly-label {
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-module .bookly-form select,
.elementor .cp-module .bookly-form input[type="text"],
.elementor .cp-module .bookly-form input[type="email"],
.elementor .cp-module .bookly-form input[type="tel"],
.elementor .cp-module .bookly-form input[type="number"],
.elementor .cp-module .bookly-form textarea {
  min-height: var(--s-48) !important;
  padding: var(--s-12) var(--s-16) !important;
  border: var(--border-width-s) solid var(--color-secondary) !important;
  border-radius: var(--radius-m) !important;
  background-color: var(--color-white) !important;
  color: var(--color-secondary) !important;
  font-size: 16px !important;
  box-shadow: none !important;
}

.elementor .cp-module .bookly-form select:hover,
.elementor .cp-module .bookly-form input:hover,
.elementor .cp-module .bookly-form textarea:hover {
  border-color: var(--color-primary) !important;
}

.elementor .cp-module .bookly-form .bookly-btn,
.elementor .cp-module .bookly-form .bookly-btn-submit,
.elementor .cp-module .bookly-form .bookly-js-next-step,
.elementor .cp-module .bookly-form .bookly-js-go-to-cart {
  display: inline-flex;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--s-8) !important;
  min-height: var(--s-48) !important;
  padding: var(--s-12) var(--s-32) !important;
  border: var(--border-width-s) solid var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  box-shadow: none !important;
  transition: background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* Libellé : le plugin pose 18 px gras blanc sur le span ladda-label ; il hérite du bouton */
.elementor .cp-module .bookly-form .bookly-btn > span,
.elementor .cp-module .bookly-form .bookly-btn-submit > span {
  font: inherit !important;
  line-height: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
}

.elementor .cp-module .bookly-form .bookly-btn:hover,
.elementor .cp-module .bookly-form .bookly-btn-submit:hover {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

.elementor .cp-module .bookly-form .bookly-js-back-step,
.elementor .cp-module .bookly-form .bookly-back-step,
.elementor .cp-module .bookly-form .bookly-prev-step,
.elementor .cp-module .bookly-form .bookly-js-prev-step,
.elementor .cp-module .bookly-form .bookly-mobile-prev-step {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--color-primary) !important;
  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 7px !important;
  padding-inline: 0 !important;
}

.elementor .cp-module .bookly-form .bookly-js-back-step:hover,
.elementor .cp-module .bookly-form .bookly-back-step:hover,
.elementor .cp-module .bookly-form .bookly-prev-step:hover,
.elementor .cp-module .bookly-form .bookly-js-prev-step:hover,
.elementor .cp-module .bookly-form .bookly-mobile-prev-step:hover {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--color-secondary) !important;
}

/* Filet au-dessus des boutons de navigation (silver chez le plugin) */
.elementor .cp-module .bookly-form .bookly-nav-steps {
  padding-top: var(--s-24) !important;
  border-top-color: var(--color-border) !important;
}

/* Étape des horaires : colonnes de créneaux du plugin (en-tête de jour, puis un bouton par créneau).
   Jour en bandeau sable non cliquable, créneaux en puces à contour (survol et sélection en terracotta),
   créneaux pris estompés et barrés (règle du plugin conservée), pastille du plugin masquée,
   flèches de pagination en pilules carrées. Largeur des colonnes laissée au plugin : son script
   compte les colonnes par écran d'après leur largeur au rendu. */
.elementor .cp-module .bookly-form .bookly-columnizer .bookly-day,
.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour {
  height: auto !important;
  margin: 0 0 var(--s-8) 0 !important;
  padding: var(--s-8) var(--s-12) !important;
  border-radius: var(--radius-m) !important;
  font-family: var(--font-body) !important;
  line-height: 20px !important;
  box-shadow: none !important;
}

.elementor .cp-module .bookly-form .bookly-columnizer .bookly-day {
  background: var(--color-tertiary) !important;
  border: var(--border-width-s) solid var(--color-tertiary) !important;
  color: var(--color-secondary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
}

.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour {
  min-height: 44px !important;
  background: var(--color-white) !important;
  border: var(--border-width-s) solid var(--color-border) !important;
  color: var(--color-secondary) !important;
  font-size: 15px !important;
  transition: background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour span {
  color: inherit !important;
  font-weight: 500 !important;
}

.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour .bookly-hour-icon {
  display: none !important;
}

.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour:hover,
.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour:active,
.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour:focus-visible {
  border: var(--border-width-s) solid var(--color-primary) !important;
  background: var(--color-primary-10) !important;
  color: var(--color-primary) !important;
}

.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour.booked,
.elementor .cp-module .bookly-form .bookly-columnizer .bookly-hour.booked:hover {
  opacity: 0.45 !important;
  background: var(--color-white) !important;
  border-color: var(--color-border) !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-module .bookly-form .bookly-time-prev,
.elementor .cp-module .bookly-form .bookly-time-next {
  min-width: var(--s-48) !important;
  height: var(--s-48) !important;
  padding: 0 var(--s-16) !important;
}

/* Focus visible (le plugin pose outline: 0 et une ombre bleue de 1 px) */
.elementor .cp-module .bookly-form select:focus-visible,
.elementor .cp-module .bookly-form input:focus-visible,
.elementor .cp-module .bookly-form textarea:focus-visible,
.elementor .cp-module .bookly-form .bookly-btn:focus-visible {
  outline: var(--border-width-m) solid var(--color-secondary) !important;
  outline-offset: 3px !important;
  box-shadow: none !important;
}

/* PranaQuiz : form.prana-wrapper > .prana-quiz > .progress + .step (h2, .choice, .info, .action, .results) */
.elementor .cp-module .prana-wrapper {
  width: 100%;
}

.elementor .cp-module .prana-quiz {
  display: flex;
  flex-direction: column;
  gap: var(--s-32);
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.elementor .cp-module .prana-quiz .progress {
  height: var(--s-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background-color: var(--color-border);
}

.elementor .cp-module .prana-quiz .progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background-color: var(--color-primary);
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor .cp-module .prana-quiz .step {
  flex-direction: column;
  gap: var(--s-24);
}

.elementor .cp-module .prana-quiz .step.active {
  display: flex;
}

.elementor .cp-module .prana-quiz .step h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--color-secondary);
}

.elementor .cp-module .prana-quiz .step p,
.elementor .cp-module .prana-quiz .step label {
  font-family: var(--font-body);
  color: var(--color-body);
}

.elementor .cp-module .prana-quiz .choice {
  width: 100%;
  max-width: none;
  margin: 0 0 var(--s-12) 0;
}

.elementor .cp-module .prana-quiz .choice label {
  display: flex;
  align-items: center;
  gap: var(--s-16);
  min-height: 56px;
  margin: 0;
  padding: var(--s-12) var(--s-20);
  border: var(--border-width-s) solid var(--color-border);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  color: var(--color-secondary);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s;
}

.elementor .cp-module .prana-quiz .choice label {
  box-shadow: none;
  overflow: visible;
}

/* Le plugin dessine son propre bouton radio (bloc orange absolu + pseudo-éléments) : on le retire et on montre le vrai champ */
.elementor .cp-module .prana-quiz .choice label > div {
  position: static;
  display: flex;
  flex: none;
  width: auto;
  background: none;
}

.elementor .cp-module .prana-quiz .choice label > div::before,
.elementor .cp-module .prana-quiz .choice label > div::after {
  content: none;
  display: none;
}

.elementor .cp-module .prana-quiz .choice label > div input {
  opacity: 1;
}

.elementor .cp-module .prana-quiz .choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: var(--s-20);
  height: var(--s-20);
  margin: 0;
  border: var(--border-width-s) solid var(--color-secondary);
  border-radius: 50%;
  background-color: var(--color-white);
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s;
}

.elementor .cp-module .prana-quiz .choice input[type="radio"]:checked {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  box-shadow: inset 0 0 0 4px var(--color-white);
}

.elementor .cp-module .prana-quiz .choice label:hover,
.elementor .cp-module .prana-quiz .choice label:has(input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-10);
}

.elementor .cp-module .prana-quiz .choice label:has(input:focus-visible) {
  outline: var(--border-width-m) solid var(--color-secondary);
  outline-offset: 3px;
}

.elementor .cp-module .prana-quiz .choice input:focus-visible {
  outline: none;
}

.elementor .cp-module .prana-quiz .action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-12) var(--s-24);
  margin-top: var(--s-8);
}

.elementor .cp-module .prana-quiz .action .next,
.elementor .cp-module .prana-quiz .action button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: var(--s-48);
  margin-left: auto;
  padding: var(--s-12) var(--s-32);
  border: var(--border-width-s) solid var(--color-primary);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.elementor .cp-module .prana-quiz .action .next:hover,
.elementor .cp-module .prana-quiz .action button[type="submit"]:hover {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

.elementor .cp-module .prana-quiz .action .back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-8);
  min-height: var(--s-48);
  padding: var(--s-12) var(--s-0);
  color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 7px;
}

/* Formulaire de l'avant-dernière étape (nom, prénom, courriel, lettre d'information) */
.elementor .cp-module .prana-quiz .info {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.elementor .cp-module .prana-quiz .info .row {
  display: flex;
  gap: var(--s-24);
}

.elementor .cp-module .prana-quiz .info .row > div {
  flex: 1 1 0;
  min-width: 0;
}

.elementor .cp-module .prana-quiz .info > div > label,
.elementor .cp-module .prana-quiz .info .row label {
  display: block;
  margin-bottom: var(--s-8);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.elementor .cp-module .prana-quiz .info .row > div {
  width: auto;
  margin-bottom: 0;
}

.elementor .cp-module .prana-quiz .info input[type="text"],
.elementor .cp-module .prana-quiz .info input[type="email"] {
  width: 100%;
  box-shadow: none;
  min-height: var(--s-48);
  margin: 0;
  padding: var(--s-12) var(--s-16);
  border: var(--border-width-s) solid var(--color-secondary);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: 16px;
}

.elementor .cp-module .prana-quiz .info input:hover {
  border-color: var(--color-primary);
}

.elementor .cp-module .prana-quiz .info .optin {
  padding: 0;
}

/* Même principe pour la case à cocher dessinée par le plugin : on montre le vrai champ */
.elementor .cp-module .prana-quiz .optin .checkbox-optin {
  position: static;
  display: flex;
  align-items: flex-start;
  gap: var(--s-12);
  padding-left: 0;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-body);
}

.elementor .cp-module .prana-quiz .optin label::before,
.elementor .cp-module .prana-quiz .optin label::after {
  content: none;
  display: none;
}

.elementor .cp-module .prana-quiz .optin input[type="checkbox"] {
  position: static;
  flex: none;
  width: var(--s-20);
  height: var(--s-20);
  margin: 2px 0 0 0;
  opacity: 1;
  accent-color: var(--color-primary);
}

.elementor .cp-module .prana-quiz .legal {
  margin: var(--s-8) 0 0 0;
  padding-left: 0;
  font-size: 12px;
}

.elementor .cp-module .prana-quiz .legal a {
  color: var(--color-primary);
  text-decoration: underline;
}

/* Résultat */
.elementor .cp-module .prana-quiz .results {
  display: flex;
  flex-direction: column;
  gap: var(--s-12);
  padding: var(--s-32);
  border-radius: var(--radius-m);
  background-color: var(--color-primary-10);
}

.elementor .cp-module .prana-quiz .results h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 40px;
  font-style: italic;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-primary);
}

@media (max-width: 767px) {
  .elementor .cp-module .prana-quiz .step h2 { font-size: 24px; }
  .elementor .cp-module .prana-quiz .choice label { gap: var(--s-12); padding: var(--s-12) var(--s-16); }
  .elementor .cp-module .prana-quiz .info .row { flex-direction: column; }
  .elementor .cp-module .prana-quiz .results { padding: var(--s-24); }
  .elementor .cp-module .prana-quiz .results h3 { font-size: 32px; }
}

/* --- 1.11.0 (étape 9, lot D) · cartes des boucles de collection (journal, cartes cadeaux) ----------
   La carte est un e-collection-loop-item portant la classe globale cp-post (puis cp-product) ; son
   visuel est une e-image cp-cover dans une enveloppe à débord masqué. Survol composé (décision 2) :
   zoom du visuel, titre lié en terracotta. */
.elementor .cp-post .cp-cover,
.elementor .cp-product .cp-cover {
  transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor .cp-post:hover .cp-cover,
.elementor .cp-product:hover .cp-cover {
  transform: scale(1.05);
}

.elementor .cp-post h2 a,
.elementor .cp-product h2 a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s;
}

.elementor .cp-post h2 a:hover,
.elementor .cp-product h2 a:hover {
  color: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .elementor .cp-post .cp-cover,
  .elementor .cp-product .cp-cover {
    transition: none;
  }

  .elementor .cp-post:hover .cp-cover,
  .elementor .cp-product:hover .cp-cover {
    transform: none;
  }
}

/* --- 1.12.1 (étape 9, lot D) · contenu d'article dans la colonne cp-article ----------
   1.12.1 : déclarations typographiques en !important, car le CSS propre à chaque article
   (.elementor-<id> .elementor-element.elementor-element-<id> …, polices de l'ancien design) prime sinon.
   Le gabarit d'article V4 pose le widget V3 theme-post-content dans une el-boxed portant la classe
   globale cp-article (colonne de 620 px). Les articles sont construits avec Elementor V3 (sections,
   colonnes, titres, éditeurs de texte à styles en ligne) : ce bloc ramène ce balisage à la typographie
   du design system (intertitres tp-h3 / tp-h4, texte tp-body, liens, listes, images). */
.elementor .cp-article .elementor-widget-theme-post-content {
  width: 100%;
}

.elementor .cp-article .elementor-section .elementor-container {
  max-width: none;
}

.elementor .cp-article .elementor-column-gap-default > .elementor-column > .elementor-element-populated,
.elementor .cp-article .elementor-column-gap-default > .elementor-column > .elementor-element-populated > .elementor-widget-wrap {
  padding: 0 !important;
}

.elementor .cp-article .elementor-widget:not(:last-child) {
  margin-bottom: var(--s-20);
}

.elementor .cp-article .elementor-heading-title {
  margin: var(--s-16) 0 0 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 32px !important;
  font-weight: 400 !important;
  line-height: 38px !important;
  letter-spacing: -0.005em !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-article .elementor-widget:first-child .elementor-heading-title {
  margin-top: 0;
}

.elementor .cp-article h3.elementor-heading-title,
.elementor .cp-article h4.elementor-heading-title {
  font-size: 24px !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
}

.elementor .cp-article .elementor-heading-title em {
  font-style: italic;
  color: var(--color-primary) !important;
}

.elementor .cp-article .elementor-widget-text-editor,
.elementor .cp-article .elementor-image-box-description {
  font-family: var(--font-body) !important;
  font-size: 17px !important;
  line-height: 28px !important;
  color: var(--color-body) !important;
}

.elementor .cp-article .elementor-widget-text-editor p {
  margin: 0 0 var(--s-16) 0 !important;
}

.elementor .cp-article .elementor-widget-text-editor p:last-child {
  margin-bottom: 0;
}

.elementor .cp-article .elementor-widget-text-editor span {
  color: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
}

.elementor .cp-article .elementor-widget-text-editor strong {
  font-weight: 600 !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-article .elementor-widget-text-editor a {
  color: var(--color-primary) !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s;
}

.elementor .cp-article .elementor-widget-text-editor a:hover {
  color: var(--color-secondary) !important;
}

.elementor .cp-article .elementor-widget-text-editor ul,
.elementor .cp-article .elementor-widget-text-editor ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  margin: 0 0 var(--s-16) 0 !important;
  padding-left: var(--s-24);
}

.elementor .cp-article .elementor-widget-text-editor li::marker {
  color: var(--color-primary) !important;
}

.elementor .cp-article .elementor-widget-text-editor blockquote {
  margin: 0 !important;
  padding-left: var(--s-24);
  border-left: 2px solid var(--color-quaternary);
  font-family: var(--font-heading) !important;
  font-style: italic;
  font-size: 24px !important;
  line-height: 34px !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-article .elementor-widget-image img,
.elementor .cp-article .elementor-widget-text-editor img,
.elementor .cp-article .elementor-image-box-img img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}

.elementor .cp-article .elementor-image-box-title {
  margin: var(--s-12) 0 var(--s-8) 0 !important;
  font-family: var(--font-heading) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  color: var(--color-secondary) !important;
}

@media (max-width: 1024px) {
  .elementor .cp-article .elementor-heading-title {
    font-size: 28px !important;
    line-height: 34px !important;
  }

  .elementor .cp-article h3.elementor-heading-title,
  .elementor .cp-article h4.elementor-heading-title,
  .elementor .cp-article .elementor-image-box-title {
    font-size: 22px !important;
    line-height: 28px !important;
  }
}

@media (max-width: 767px) {
  .elementor .cp-article .elementor-heading-title {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .elementor .cp-article h3.elementor-heading-title,
  .elementor .cp-article h4.elementor-heading-title,
  .elementor .cp-article .elementor-image-box-title {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .elementor .cp-article .elementor-widget-text-editor,
  .elementor .cp-article .elementor-image-box-description {
    font-size: 16px !important;
    line-height: 26px !important;
  }
}

/* --- 1.13.0 (étape 9, lot D) · gabarit produit : formulaire d'achat WooCommerce sous cp-cart ----------
   Le widget V3 « Ajouter au panier » avec quantité rend form.cart > div.quantity > input.qty + button.single_add_to_cart_button
   (le bouton est déjà habillé par .cp-cart .button, 1.9.0). Sur les pages WooCommerce (body.woocommerce), la feuille legacy
   du thème stylesheets/screen.css pose « .woocommerce button.button » (0,3,1) avec Poppins en !important, qui primait sur
   .cp-cart .button (0,3,0) : les règles 1.9.0 portent désormais aussi le sélecteur .woocommerce .elementor .cp-cart .button
   (0,4,0) et la police en !important (à revoir à l'étape 10 : revue des assets legacy). Champ quantité au dessin des champs du design system
   (48 px, contour cacao, rayon m, 16 px centré), flèches natives masquées ; formulaire en rangée de 12 / 16. */
.elementor .cp-cart form.cart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12) var(--s-16);
  margin: 0;
}

.elementor .cp-cart .quantity {
  display: inline-flex;
  margin: 0;
}

.elementor .cp-cart .quantity .qty {
  box-sizing: border-box;
  width: 88px;
  min-height: var(--s-48);
  margin: 0;
  padding: var(--s-12) var(--s-16);
  border: var(--border-width-s) solid var(--color-secondary);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  text-align: center;
  box-shadow: none;
  -moz-appearance: textfield;
  appearance: textfield;
}

.elementor .cp-cart .quantity .qty::-webkit-outer-spin-button,
.elementor .cp-cart .quantity .qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.elementor .cp-cart .quantity .qty:hover {
  border-color: var(--color-primary);
}

.elementor .cp-cart .quantity .qty:focus-visible {
  outline: var(--border-width-m) solid var(--color-secondary);
  outline-offset: 3px;
}

.elementor .cp-cart .single_add_to_cart_button {
  margin: 0;
}

/* --- 1.13.1 · contenu WordPress natif dans la colonne cp-article ----------
   Un article écrit dans l'éditeur WordPress (sans Elementor) arrive en balises nues directement sous
   .elementor-widget-theme-post-content (balisage optimisé d'Elementor, e_optimized_markup actif : pas de
   .elementor-widget-container) ; 1.13.1 vise les deux balisages. Les règles 1.12.1 ne visent que le balisage
   V3 des anciens articles et les articles V4 portent leurs classes globales. Mêmes mesures : intertitres
   tp-h3 / tp-h4, texte tp-body, liens, listes, citations, images. Enfants directs seulement, pour ne pas
   toucher aux documents Elementor imbriqués (.elementor). */
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container,
.elementor .cp-article .elementor-widget-theme-post-content {
  display: flex;
  flex-direction: column;
  gap: var(--s-20);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h2,
.elementor .cp-article .elementor-widget-theme-post-content > h2,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h3,
.elementor .cp-article .elementor-widget-theme-post-content > h3,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h4,
.elementor .cp-article .elementor-widget-theme-post-content > h4 {
  margin: var(--s-16) 0 0 0;
  font-family: var(--font-heading);
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
  letter-spacing: -0.005em;
  color: var(--color-secondary);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > :first-child,
.elementor .cp-article .elementor-widget-theme-post-content > :first-child {
  margin-top: 0;
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h3,
.elementor .cp-article .elementor-widget-theme-post-content > h3,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h4,
.elementor .cp-article .elementor-widget-theme-post-content > h4 {
  font-size: 24px;
  line-height: 30px;
  letter-spacing: 0;
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h2 em,
.elementor .cp-article .elementor-widget-theme-post-content > h2 em,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h3 em,
.elementor .cp-article .elementor-widget-theme-post-content > h3 em {
  font-style: italic;
  color: var(--color-primary);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > p,
.elementor .cp-article .elementor-widget-theme-post-content > p,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ul,
.elementor .cp-article .elementor-widget-theme-post-content > ul,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ol,
.elementor .cp-article .elementor-widget-theme-post-content > ol {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 28px;
  color: var(--color-body);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > p strong,
.elementor .cp-article .elementor-widget-theme-post-content > p strong,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ul strong,
.elementor .cp-article .elementor-widget-theme-post-content > ul strong,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ol strong,
.elementor .cp-article .elementor-widget-theme-post-content > ol strong {
  font-weight: 600;
  color: var(--color-secondary);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > p a,
.elementor .cp-article .elementor-widget-theme-post-content > p a,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ul a,
.elementor .cp-article .elementor-widget-theme-post-content > ul a,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ol a,
.elementor .cp-article .elementor-widget-theme-post-content > ol a {
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.25s;
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > p a:hover,
.elementor .cp-article .elementor-widget-theme-post-content > p a:hover,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ul a:hover,
.elementor .cp-article .elementor-widget-theme-post-content > ul a:hover,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ol a:hover,
.elementor .cp-article .elementor-widget-theme-post-content > ol a:hover {
  color: var(--color-secondary);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ul,
.elementor .cp-article .elementor-widget-theme-post-content > ul,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ol,
.elementor .cp-article .elementor-widget-theme-post-content > ol {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
  padding-left: var(--s-24);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ul li::marker,
.elementor .cp-article .elementor-widget-theme-post-content > ul li::marker,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ol li::marker,
.elementor .cp-article .elementor-widget-theme-post-content > ol li::marker {
  color: var(--color-primary);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > blockquote,
.elementor .cp-article .elementor-widget-theme-post-content > blockquote {
  margin: 0;
  padding-left: var(--s-24);
  border-left: 2px solid var(--color-quaternary);
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 24px;
  line-height: 34px;
  color: var(--color-secondary);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > blockquote p,
.elementor .cp-article .elementor-widget-theme-post-content > blockquote p {
  margin: 0;
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > figure,
.elementor .cp-article .elementor-widget-theme-post-content > figure {
  margin: 0;
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > figure img,
.elementor .cp-article .elementor-widget-theme-post-content > figure img,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > p img,
.elementor .cp-article .elementor-widget-theme-post-content > p img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-m);
}
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > figure figcaption,
.elementor .cp-article .elementor-widget-theme-post-content > figure figcaption {
  margin-top: var(--s-8);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 22px;
  color: var(--color-body);
}

@media (max-width: 1024px) {
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h2,
.elementor .cp-article .elementor-widget-theme-post-content > h2 {
    font-size: 28px;
    line-height: 34px;
  }
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h3,
.elementor .cp-article .elementor-widget-theme-post-content > h3,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h4,
.elementor .cp-article .elementor-widget-theme-post-content > h4 {
    font-size: 22px;
    line-height: 28px;
  }
}

@media (max-width: 767px) {
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h2,
.elementor .cp-article .elementor-widget-theme-post-content > h2 {
    font-size: 24px;
    line-height: 30px;
  }
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h3,
.elementor .cp-article .elementor-widget-theme-post-content > h3,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > h4,
.elementor .cp-article .elementor-widget-theme-post-content > h4 {
    font-size: 20px;
    line-height: 26px;
  }
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > p,
.elementor .cp-article .elementor-widget-theme-post-content > p,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ul,
.elementor .cp-article .elementor-widget-theme-post-content > ul,
.elementor .cp-article .elementor-widget-theme-post-content > .elementor-widget-container > ol,
.elementor .cp-article .elementor-widget-theme-post-content > ol {
    font-size: 16px;
    line-height: 26px;
  }
}

/* --- 1.14.0 / 1.14.1 / 1.14.2 (étape 10) · en-tête et pied de page V4 ----------
   1.14.2 = 1.14.1 redéposé sous une nouvelle version : Cloudflare met le fichier en cache par adresse (?ver=).
   Site parts V4 : la barre collante vient du conteneur de l'emplacement (l'élément sticky ne peut pas dépasser
   son parent, le site part fait la hauteur de son contenu). Les widgets V3 Pro (menu de navigation, mini-panier)
   ne reçoivent ni classe ni style V4 : leurs enveloppes cp-nav-menu, cp-nav-mobile et cp-nav-cart servent de
   crochets et le thème habille leur balisage (menu desktop en tp-Body-XS-CAPS avec filet animé, sous-menu en carte,
   bascule burger, panneau mobile plein écran en tp-h4 avec flèches, actions du menu mobile en boutons, panier en
   pastille). */
.elementor-location-header {
  position: sticky;
  top: 0;
  z-index: 50;
}

/* 1.14.1 : connecté à WordPress, la barre d'administration (32 px, 46 px sous 783 px) est fixée en haut : la barre collante se cale dessous */
body.admin-bar .elementor-location-header {
  top: 32px;
}

@media (max-width: 782px) {
  body.admin-bar .elementor-location-header {
    top: 46px;
  }
}

/* menu desktop */
.elementor .cp-nav-menu .elementor-widget-nav-menu,
.elementor .cp-nav-menu .elementor-nav-menu--main {
  width: 100%;
}

/* 1.14.1 : le nav du widget est lui-même un conteneur flex, la liste y restait ferrée à gauche → liste pleine largeur et nav centré */
.elementor .cp-nav-menu .elementor-nav-menu--main {
  display: flex;
  justify-content: center;
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  gap: 0 var(--s-32);
  margin: 0;
  padding: 0;
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li {
  position: relative;
  margin: 0;
}

/* 1.14.1 : le pseudo-élément de clearfix du script de menu (ul::after, contenu « ») compte comme un enfant flex et décale la rangée de 16 px */
.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu::after {
  content: none;
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-8) 0 !important;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary) !important;
  fill: var(--color-secondary);
  transition: color 0.25s;
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 3px;
  height: 1px;
  background-color: var(--color-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item:hover::after,
.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li > .elementor-item.elementor-item-active::after,
.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li.current-menu-ancestor > .elementor-item::after {
  transform: scaleX(1);
}

/* 1.14.1 : chevron de l'entrée à sous-menu (le widget ne rend pas de .sub-arrow ici), tourné à l'ouverture */
.elementor .cp-nav-menu .elementor-nav-menu--main li.menu-item-has-children > .elementor-item::before {
  content: "";
  order: 2;
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor .cp-nav-menu .elementor-nav-menu--main li.menu-item-has-children:hover > .elementor-item::before,
.elementor .cp-nav-menu .elementor-nav-menu--main li.menu-item-has-children:focus-within > .elementor-item::before {
  transform: rotate(180deg);
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-item .sub-arrow {
  display: inline-flex;
  width: 14px;
  height: 14px;
  padding: 0;
  color: inherit;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-item .sub-arrow i,
.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-item .sub-arrow svg {
  width: 14px;
  height: 14px;
  font-size: 12px;
  line-height: 14px;
}

.elementor .cp-nav-menu .elementor-nav-menu--main .elementor-nav-menu > li:hover > .elementor-item .sub-arrow {
  color: var(--color-primary);
  transform: rotate(180deg);
}

/* sous-menu ouvert au survol et au clavier (le script du widget ne l'ouvre qu'au clic sur ce site), centré sous l'entrée */
.elementor .cp-nav-menu .elementor-nav-menu--main .sub-menu {
  position: absolute !important;
  top: 100% !important;
  left: 50% !important;
  z-index: 60;
  transform: translateX(-50%);
  min-width: 240px;
  margin-top: var(--s-8) !important;
  padding: var(--s-8);
  border: var(--border-width-s) solid var(--color-border);
  border-radius: var(--radius-m);
  background-color: var(--color-white);
  box-shadow: 0 16px 40px rgba(59, 35, 25, 0.12);
}

.elementor .cp-nav-menu .elementor-nav-menu--main li.menu-item-has-children:hover > .sub-menu,
.elementor .cp-nav-menu .elementor-nav-menu--main li.menu-item-has-children:focus-within > .sub-menu {
  display: block !important;
}

/* 1.14.1 : pont invisible qui couvre l'écart de 8 px entre l'entrée et sa carte, sinon le survol se perd en descendant */
.elementor .cp-nav-menu .elementor-nav-menu--main .sub-menu::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 0;
  right: 0;
  height: 12px;
}

.elementor .cp-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--s-8) var(--s-16) !important;
  border-radius: var(--radius-s);
  background-color: transparent;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary) !important;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s;
}

.elementor .cp-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item:hover,
.elementor .cp-nav-menu .elementor-nav-menu--main .sub-menu a.elementor-sub-item.elementor-item-active {
  background-color: var(--color-primary-10);
  color: var(--color-primary) !important;
}

/* menu mobile : bascule et panneau */
.elementor .cp-nav-mobile .elementor-widget-nav-menu {
  width: auto;
}

.elementor .cp-nav-mobile .elementor-menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-secondary);
  transition: background-color 0.25s, color 0.25s;
}

.elementor .cp-nav-mobile .elementor-menu-toggle:hover,
.elementor .cp-nav-mobile .elementor-menu-toggle.elementor-active {
  background-color: var(--color-primary-10);
  color: var(--color-primary);
}

.elementor .cp-nav-mobile .elementor-menu-toggle i,
.elementor .cp-nav-mobile .elementor-menu-toggle svg {
  width: 24px;
  height: 24px;
  font-size: 24px;
  fill: currentColor;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  position: fixed !important;
  top: 68px !important;
  right: 0 !important;
  bottom: 0;
  left: 0 !important;
  width: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: var(--s-24) var(--s-24) var(--s-48);
  overflow-y: auto;
  background-color: var(--color-white);
  box-shadow: none;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown .elementor-nav-menu {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown .elementor-nav-menu > li {
  margin: 0;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-item,
.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-16) 0 !important;
  border-bottom: var(--border-width-s) solid var(--color-border);
  background-color: transparent !important;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-secondary) !important;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-item::after,
.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item::after {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  background-color: var(--color-quaternary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active {
  color: var(--color-primary) !important;
  font-style: italic;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown .sub-menu {
  margin: 0;
  padding: 0 0 0 var(--s-24);
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item {
  font-size: 20px;
  line-height: 26px;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown .sub-arrow {
  display: none;
}

/* actions du menu mobile : classes posées sur les éléments du menu WordPress « Header-mobile » */
.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-primary,
.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-secondary {
  padding-top: var(--s-12);
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-primary {
  padding-top: var(--s-32);
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-primary > a.elementor-item,
.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-secondary > a.elementor-item {
  justify-content: center;
  min-height: var(--s-48);
  padding: var(--s-12) var(--s-32) !important;
  border: var(--border-width-s) solid var(--color-primary);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary) !important;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white) !important;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-secondary > a.elementor-item {
  border-color: var(--color-secondary);
  background-color: transparent !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-primary > a.elementor-item::after,
.elementor .cp-nav-mobile .elementor-nav-menu--dropdown li.cp-cta-secondary > a.elementor-item::after {
  content: none;
}

/* mini-panier : pastille de 44 px, compteur terracotta, sous-total masqué (le widget prend sinon la largeur de son texte) */
.elementor .cp-nav-cart .elementor-widget-woocommerce-menu-cart,
.elementor .cp-nav-cart .elementor-menu-cart__wrapper,
.elementor .cp-nav-cart .elementor-menu-cart__toggle_wrapper,
.elementor .cp-nav-cart .elementor-menu-cart__toggle {
  width: 44px;
  min-width: 0;
  margin: 0;
}

.elementor .cp-nav-cart .elementor-menu-cart__toggle .elementor-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-secondary);
  transition: background-color 0.25s, color 0.25s;
}

.elementor .cp-nav-cart .elementor-menu-cart__toggle .elementor-button:hover {
  background-color: var(--color-primary-10);
  color: var(--color-primary);
}

.elementor .cp-nav-cart .elementor-menu-cart__toggle .elementor-button-text {
  display: none;
}

.elementor .cp-nav-cart .elementor-menu-cart__toggle .elementor-button-icon {
  display: inline-flex;
  margin: 0;
  font-size: 24px;
}

.elementor .cp-nav-cart .elementor-menu-cart__toggle .elementor-button-icon-qty {
  position: absolute;
  top: 5px;
  right: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 var(--s-4);
  border-radius: var(--radius-pill);
  background-color: var(--color-primary) !important;
  color: var(--color-white) !important;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
}

.elementor .cp-nav-cart .elementor-menu-cart__toggle .elementor-button-icon-qty[data-counter="0"] {
  display: none;
}

@media (max-width: 767px) {
  .elementor .cp-nav-mobile .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    top: 60px !important;
    padding: var(--s-16) var(--s-12) var(--s-40);
  }
}

/* --- 1.15.0 (étape 10) · sélecteur de quantité − / + de la fiche produit ----------
   Le script du thème 1.1.0 (prana-v4.js) entoure le champ quantité de WooCommerce de deux boutons
   et rend son libellé visible. Dessin de la maquette (cp-qty, cp-qty-controls, cp-qty-btn, cp-qty-input) :
   colonne libellé + rangée, boutons ronds de 48 px à contour cacao (plein terracotta au survol), champ de 72 px.
   Sans script, le champ seul reste habillé par 1.13.0. */
.elementor .cp-cart form.cart {
  align-items: flex-end;
  gap: var(--s-16) var(--s-24);
}

.elementor .cp-cart .quantity {
  display: flex;
  flex-direction: column;
  gap: var(--s-8);
}

.elementor .cp-cart .quantity .cp-qty-label {
  position: static;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.02em;
  color: var(--color-secondary);
}

.elementor .cp-cart .quantity .cp-qty-controls {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.elementor .cp-cart .quantity .cp-qty-controls .qty {
  width: 72px;
  padding: var(--s-12) var(--s-8);
}

.elementor .cp-cart .cp-qty-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: var(--s-48);
  height: var(--s-48);
  margin: 0;
  padding: 0;
  border: var(--border-width-s) solid var(--color-secondary);
  border-radius: var(--radius-pill);
  background-color: transparent;
  color: var(--color-secondary);
  font-family: var(--font-body);
  font-size: 22px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}

.elementor .cp-cart .cp-qty-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--color-primary);
  color: var(--color-white);
}

.elementor .cp-cart .cp-qty-btn:focus-visible {
  outline: var(--border-width-m) solid var(--color-secondary);
  outline-offset: 3px;
}


/* --- 1.15.1 (étape 10) · menu mobile : entrées plus petites, panneau calé sous la barre d'administration ----------
   Retours de Sébastien du 08/10/2026. Les entrées du panneau passent du tp-h4 (24 px partout) au tp-h5
   (20 / 26 px, 18 / 24 px sous 768 px) ; les sous-entrées en 18 → 16 px. Le panneau (position fixe) commençait
   à 68 / 60 px du haut de la fenêtre quelle que soit la position de l'en-tête : connecté à WordPress, la barre
   d'administration décale l'en-tête de 32 / 46 px et le panneau (z-index 9997 posé par Elementor) recouvrait
   la bascule, d'où le bouton de fermeture invisible. Le décalage est lu dans la variable
   --wp-admin--admin-bar--height que WordPress pose sur html quand la barre est affichée (0 sinon), et la
   bascule passe au-dessus du panneau dans le contexte d'empilement de l'en-tête. */
.elementor .cp-nav-mobile .elementor-menu-toggle {
  position: relative;
  z-index: 9998;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown.elementor-nav-menu__container {
  top: calc(68px + var(--wp-admin--admin-bar--height, 0px)) !important;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-item,
.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item {
  padding: 14px 0 !important;
  font-size: 20px;
  line-height: 26px;
}

.elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item {
  font-size: 18px;
  line-height: 24px;
}

@media (max-width: 767px) {
  .elementor .cp-nav-mobile .elementor-nav-menu--dropdown.elementor-nav-menu__container {
    top: calc(60px + var(--wp-admin--admin-bar--height, 0px)) !important;
  }

  .elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-item {
    font-size: 18px;
    line-height: 24px;
  }

  .elementor .cp-nav-mobile .elementor-nav-menu--dropdown a.elementor-sub-item {
    font-size: 16px;
    line-height: 22px;
  }
}

/* --- 1.16.0 (étape 10, ligne 2) · champ de recherche ----------
   Page 404 (site part 6424) et résultats de recherche (6425) en V4 : le champ est le widget V3 Pro search-form (habillage
   classique) sous l'enveloppe à classe globale cp-search, car aucun élément V4 n'émet une requête GET vers / avec le
   paramètre s. Le widget arrive en gris Poppins (réglages par défaut et anciennes couleurs globales du kit) : conteneur en
   pilule à contour cacao (anneau terracotta au focus, porté par le conteneur), champ tp-field, bouton bt-primary carré. */
.elementor .cp-search .elementor-search-form {
  width: 100%;
}

.elementor .cp-search .elementor-search-form__container {
  min-height: 48px;
  border: var(--border-width-s) solid var(--color-secondary);
  border-radius: var(--radius-pill) !important; /* le CSS local du widget pose 3px à spécificité (0,5,0) */
  background-color: var(--color-white);
  overflow: hidden;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.elementor .cp-search .elementor-search-form__container:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-10);
}

.elementor .cp-search .elementor-search-form__input {
  padding: 0 var(--s-20) !important; /* le CSS local du widget pose 16px */
  background-color: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--color-secondary);
}

.elementor .cp-search .elementor-search-form__input::placeholder {
  color: var(--color-body);
  opacity: 1;
}

.elementor .cp-search .elementor-search-form__input:focus {
  outline: none;
}

.elementor .cp-search .elementor-search-form__submit {
  flex: 0 0 auto;
  min-width: 0;
  padding: 0 var(--s-24);
  border: 0;
  border-radius: 0;
  background-color: var(--color-primary);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-white);
  transition: background-color 0.25s;
}

.elementor .cp-search .elementor-search-form__submit:hover,
.elementor .cp-search .elementor-search-form__submit:focus-visible {
  background-color: var(--color-secondary);
  color: var(--color-white);
}

/* --- 1.17.0 (étape 10, lot E) · pages WooCommerce : panier, commande, compte, confirmation ----------
   Méthode A retenue par Sébastien le 08/10/2026 : les widgets Elementor Pro woocommerce-cart, woocommerce-checkout-page et
   woocommerce-my-account restent, posés en V4 (pages 3792 / 3793 / 3794, `page_woo.py`) sous l'enveloppe à classe globale
   cp-woo. Les widgets lisent leurs couleurs, rayons et espacements dans des variables CSS (celles de leur onglet Style) :
   on les règle ici sur le Design System ; polices, champs, boutons, notices, onglets du compte et page de confirmation
   (`woocommerce/checkout/thankyou.php` du thème) sont habillés par des règles directes, en !important quand le CSS du
   widget ou de WooCommerce prime. Les réglages de style des widgets restent vides. */
.elementor .cp-woo .elementor-widget-woocommerce-cart,
.elementor .cp-woo .elementor-widget-woocommerce-checkout-page,
.elementor .cp-woo .elementor-widget-woocommerce-my-account {
  --sections-background-color: var(--color-white);
  --sections-border-type: solid;
  --sections-border-color: var(--color-border);
  --sections-border-radius: var(--radius-l);
  --sections-padding: var(--s-32);
  --sections-margin: 0 0 var(--s-24) 0;
  --sections-title-color: var(--color-secondary);
  --sections-title-spacing: var(--s-20);
  --sections-secondary-title-color: var(--color-secondary);
  --sections-secondary-title-spacing: var(--s-20);
  --sections-descriptions-color: var(--color-body);
  --sections-messages-color: var(--color-body);
  --sections-radio-buttons-color: var(--color-primary);
  --sections-checkboxes-color: var(--color-primary);
  --forms-labels-color: var(--color-secondary);
  --forms-label-spacing: var(--s-8);
  --forms-fields-normal-color: var(--color-secondary);
  --forms-fields-focus-color: var(--color-secondary);
  --forms-fields-normal-background-color: var(--color-white);
  --forms-fields-border-radius: var(--radius-m);
  --forms-fields-padding: 12px 16px;
  --forms-buttons-normal-text-color: var(--color-white);
  --forms-buttons-hover-text-color: var(--color-white);
  --forms-buttons-hover-border-color: var(--color-secondary);
  --forms-buttons-border-radius: var(--radius-pill);
  --forms-buttons-padding: 12px 32px;
  --purchase-button-normal-text-color: var(--color-white);
  --purchase-button-hover-text-color: var(--color-white);
  --purchase-button-hover-border-color: var(--color-secondary);
  --purchase-button-border-radius: var(--radius-pill);
  --purchase-button-padding: 14px 32px;
  --purchase-button-width: 100%;
  --order-summary-title-color: var(--color-secondary);
  --order-summary-color: var(--color-secondary);
  --order-summary-items-color: var(--color-secondary);
  --order-summary-variations-color: var(--color-body);
  --order-summary-items-divider-color: var(--color-border);
  --order-summary-items-divider-weight: 1px;
  --order-summary-totals-color: var(--color-secondary);
  --order-summary-totals-divider-color: var(--color-border);
  --order-summary-totals-divider-weight: 1px;
  --order-summary-rows-gap-top: var(--s-12);
  --order-summary-rows-gap-bottom: var(--s-12);
  --totals-color: var(--color-secondary);
  --totals-divider-color: var(--color-border);
  --totals-divider-weight: 1px;
  --totals-rows-gap-top: var(--s-12);
  --totals-rows-gap-bottom: var(--s-12);
  --product-link-normal-color: var(--color-secondary);
  --product-link-hover-color: var(--color-primary);
  --general-text-color: var(--color-body);
  --login-messages-color: var(--color-body);
  --typography-section-titles-color: var(--color-secondary);
  --tables-title-color: var(--color-secondary);
  --tables-items-color: var(--color-body);
  --tables-links-normal-color: var(--color-primary);
  --tables-links-hover-color: var(--color-secondary);
  --tables-buttons-border-color: var(--color-secondary);
  --tables-button-normal-text-color: var(--color-secondary);
  --tables-button-border-radius: var(--radius-pill);
  --tables-button-padding: 8px 16px;
  --tabs-spacing: var(--s-4);
  --tabs-padding: 12px 16px;
  --tab-content-spacing: var(--s-40);
  --variations-color: var(--color-body);
  --links-normal-color: var(--color-primary);
  --links-hover-color: var(--color-secondary);
}

/* polices : Jost partout, Noto Serif Display pour les titres de bloc (tp-h4) */
.elementor .cp-woo,
.elementor .cp-woo .woocommerce,
.elementor .cp-woo table,
.elementor .cp-woo th,
.elementor .cp-woo td,
.elementor .cp-woo label,
.elementor .cp-woo p,
.elementor .cp-woo li,
.elementor .cp-woo a,
.elementor .cp-woo span,
.elementor .cp-woo input,
.elementor .cp-woo select,
.elementor .cp-woo textarea,
.elementor .cp-woo button {
  font-family: var(--font-body) !important;
}

.elementor .cp-woo h2,
.elementor .cp-woo h3,
.elementor .cp-woo h4 {
  margin: 0;
  font-family: var(--font-heading) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 30px !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--color-secondary) !important;
}

/* textes courants et liens */
.elementor .cp-woo p,
.elementor .cp-woo li,
.elementor .cp-woo td,
.elementor .cp-woo .woocommerce-privacy-policy-text,
.elementor .cp-woo .woocommerce-MyAccount-content {
  font-size: 16px;
  line-height: 24px;
  color: var(--color-secondary);
}

.elementor .cp-woo .woocommerce-privacy-policy-text,
.elementor .cp-woo .woocommerce-privacy-policy-text p,
.elementor .cp-woo .lost_password,
.elementor .cp-woo .lost_password a,
.elementor .cp-woo .woocommerce-form-login__rememberme {
  font-size: 14px;
  line-height: 20px;
  color: var(--color-body);
}

.elementor .cp-woo a:not(.button):not(.remove):not([class*="button"]) {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.elementor .cp-woo a:not(.button):not(.remove):not([class*="button"]):hover {
  color: var(--color-secondary);
}

/* tableaux : en-têtes en libellé, lignes à filet, totaux en évidence */
.elementor .cp-woo th,
.elementor .cp-woo .cart_totals th,
.elementor .cp-woo .woocommerce-checkout-review-order-table th {
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body) !important;
}

.elementor .cp-woo td.product-name a,
.elementor .cp-woo .woocommerce-checkout-review-order-table .product-name {
  font-weight: 500;
  color: var(--color-secondary) !important;
  text-decoration: none;
}

.elementor .cp-woo td.product-price,
.elementor .cp-woo td.product-subtotal,
.elementor .cp-woo .cart_totals td,
.elementor .cp-woo .woocommerce-checkout-review-order-table td {
  font-size: 16px !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-woo .cart_totals .order-total th,
.elementor .cp-woo .cart_totals .order-total td,
.elementor .cp-woo .woocommerce-checkout-review-order-table .order-total th,
.elementor .cp-woo .woocommerce-checkout-review-order-table .order-total td {
  font-size: 18px !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-secondary) !important;
}

.elementor .cp-woo td.product-thumbnail img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-m);
}

.elementor .cp-woo a.remove {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50%;
  font-size: 22px !important;
  line-height: 32px !important;
  font-weight: 400 !important;
  text-align: center;
  color: var(--color-body) !important;
  transition: color 0.25s, background-color 0.25s;
}

.elementor .cp-woo a.remove:hover {
  background-color: var(--color-primary-10) !important;
  color: var(--color-primary) !important;
}

/* champs : contour cacao, rayon m, 48 px, anneau terracotta au focus (comme Bookly) */
.elementor .cp-woo input.input-text,
.elementor .cp-woo input.qty,
.elementor .cp-woo select,
.elementor .cp-woo textarea,
.elementor .cp-woo .select2-container .select2-selection--single {
  min-height: 48px;
  padding: 12px 16px !important;
  border: var(--border-width-s) solid var(--color-secondary) !important;
  border-radius: var(--radius-m) !important;
  background-color: var(--color-white) !important;
  box-shadow: none !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: var(--color-secondary) !important;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.elementor .cp-woo input.input-text::placeholder,
.elementor .cp-woo textarea::placeholder {
  color: var(--color-body);
  opacity: 0.7;
}

.elementor .cp-woo input.input-text:focus,
.elementor .cp-woo input.qty:focus,
.elementor .cp-woo select:focus,
.elementor .cp-woo textarea:focus {
  outline: none !important;
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px var(--color-primary-10) !important;
}

.elementor .cp-woo select {
  width: 100% !important;
}

/* pas de code promo sur ce site (comme l'ancien panier) : bascule de la commande masquée, à retirer si des codes sont créés */
.elementor .cp-woo .woocommerce-form-coupon-toggle,
.elementor .cp-woo .e-coupon-box,
.elementor .cp-woo form.checkout_coupon {
  display: none !important;
}

.elementor .cp-woo input.qty {
  width: 72px !important;
  height: 48px !important; /* le CSS du widget fixe 28 px */
  min-height: 48px !important;
  text-align: center;
  -moz-appearance: textfield;
}

/* le panier se met à jour tout seul (réglage update_cart_automatically du widget, pris en charge par son script) : le bouton reste inutile */
.elementor .cp-woo .elementor-widget-woocommerce-cart .woocommerce table.shop_table.cart .actions .button[name="update_cart"] {
  display: none !important; /* le CSS du widget pose inline-block !important à (0,5,1) */
}

.elementor .cp-woo input.qty::-webkit-outer-spin-button,
.elementor .cp-woo input.qty::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.elementor .cp-woo label {
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.02em;
  color: var(--color-secondary) !important;
}

.elementor .cp-woo label .required {
  color: var(--color-primary);
  text-decoration: none;
}

.elementor .cp-woo .select2-container .select2-selection--single .select2-selection__rendered {
  padding: 0;
  line-height: 24px;
  color: var(--color-secondary);
}

.elementor .cp-woo .select2-container .select2-selection--single .select2-selection__arrow {
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
}

/* boutons : principal = bt-primary (pilule terracotta), tableaux = contour cacao */
.elementor .cp-woo button.button,
.elementor .cp-woo a.button,
.elementor .cp-woo input.button,
.elementor .cp-woo button[type="submit"],
.elementor .cp-woo .checkout-button,
.elementor .cp-woo #place_order,
.elementor .cp-woo .woocommerce-Button,
.elementor .cp-woo .woocommerce-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-8);
  min-height: 48px;
  padding: 12px 32px !important;
  border: var(--border-width-s) solid var(--color-primary) !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--color-primary) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  color: var(--color-white) !important;
  cursor: pointer;
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}

.elementor .cp-woo button.button:hover,
.elementor .cp-woo a.button:hover,
.elementor .cp-woo input.button:hover,
.elementor .cp-woo button[type="submit"]:hover,
.elementor .cp-woo .checkout-button:hover,
.elementor .cp-woo #place_order:hover,
.elementor .cp-woo .woocommerce-Button:hover,
.elementor .cp-woo .woocommerce-button:hover {
  border-color: var(--color-secondary) !important;
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

.elementor .cp-woo button.button:focus-visible,
.elementor .cp-woo a.button:focus-visible,
.elementor .cp-woo button[type="submit"]:focus-visible,
.elementor .cp-woo #place_order:focus-visible {
  outline: var(--border-width-m) solid var(--color-secondary);
  outline-offset: 3px;
}

.elementor .cp-woo button.button:disabled,
.elementor .cp-woo button[name="update_cart"]:disabled {
  opacity: 0.45;
  cursor: default;
}

/* boutons secondaires des tableaux du compte (Voir, Télécharger) et liens d'adresse : contour cacao */
.elementor .cp-woo .woocommerce-orders-table .woocommerce-button,
.elementor .cp-woo .woocommerce-MyAccount-downloads .woocommerce-MyAccount-downloads-file,
.elementor .cp-woo .woocommerce-Address .edit {
  min-height: 40px;
  padding: 8px 20px !important;
  border-color: var(--color-secondary) !important;
  background-color: transparent !important;
  color: var(--color-secondary) !important;
}

.elementor .cp-woo .woocommerce-orders-table .woocommerce-button:hover,
.elementor .cp-woo .woocommerce-MyAccount-downloads .woocommerce-MyAccount-downloads-file:hover,
.elementor .cp-woo .woocommerce-Address .edit:hover {
  background-color: var(--color-secondary) !important;
  color: var(--color-white) !important;
}

/* notices WooCommerce : encadré sable (cp-notice), sans icône */
.elementor .cp-woo .woocommerce-message,
.elementor .cp-woo .woocommerce-info,
.elementor .cp-woo .woocommerce-error,
.elementor .cp-woo .woocommerce-notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-12) var(--s-16);
  margin: 0 0 var(--s-24);
  padding: var(--s-16) var(--s-20) !important;
  border: 0 !important;
  border-radius: var(--radius-m);
  background-color: var(--color-tertiary-10) !important;
  font-size: 15px;
  line-height: 22px;
  color: var(--color-secondary) !important;
}

.elementor .cp-woo .woocommerce-error {
  background-color: var(--color-primary-10) !important;
}

.elementor .cp-woo .woocommerce-message::before,
.elementor .cp-woo .woocommerce-info::before,
.elementor .cp-woo .woocommerce-error::before {
  display: none;
}

.elementor .cp-woo .woocommerce-error li {
  margin: 0;
  list-style: none;
}

/* commande : moyens de paiement en carte sable, bouton pleine largeur, création de compte */
.elementor .cp-woo .wc_payment_method label {
  font-size: 16px !important;
  font-weight: 500 !important;
  line-height: 24px !important;
}

.elementor .cp-woo .payment_box {
  margin-top: var(--s-12);
  padding: var(--s-16) !important;
  border-radius: var(--radius-m) !important; /* WooCommerce pose 2px à (0,3,1) */
  background-color: var(--color-tertiary-10) !important;
  font-size: 14px;
  line-height: 20px;
  color: var(--color-body);
}

.elementor .cp-woo .payment_box::before {
  display: none;
}

.elementor .cp-woo .woocommerce-form-login-toggle .woocommerce-info,
.elementor .cp-woo .woocommerce-form-coupon-toggle .woocommerce-info {
  margin-bottom: var(--s-16);
}

.elementor .cp-woo .create-account,
.elementor .cp-woo .woocommerce-account-fields {
  margin-top: var(--s-16);
}

/* compte : connexion en carte étroite (titre centré sur la même largeur), onglets en pilules, contenu aéré */
.elementor .cp-woo .woocommerce > h2 {
  max-width: 560px;
  margin: 0 auto var(--s-16);
}

.elementor .cp-woo form.woocommerce-form-login,
.elementor .cp-woo form.woocommerce-ResetPassword {
  max-width: 560px;
  margin: 0 auto;
}

.elementor .cp-woo form.woocommerce-form-login .form-row,
.elementor .cp-woo form.woocommerce-ResetPassword .form-row {
  margin-bottom: var(--s-16);
}

.elementor .cp-woo .woocommerce-MyAccount-navigation ul {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.elementor .cp-woo .woocommerce-MyAccount-navigation ul li a {
  display: block;
  padding: 12px 16px !important;
  border-radius: var(--radius-pill);
  font-size: 13px !important;
  font-weight: 500 !important;
  line-height: 20px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none !important;
  color: var(--color-secondary) !important;
  transition: background-color 0.25s, color 0.25s;
}

.elementor .cp-woo .woocommerce-MyAccount-navigation ul li a:hover,
.elementor .cp-woo .woocommerce-MyAccount-navigation ul li.is-active a {
  background-color: var(--color-primary-10) !important;
  color: var(--color-primary) !important;
}

.elementor .cp-woo .woocommerce-MyAccount-content p {
  margin: 0 0 var(--s-16);
  color: var(--color-body);
}

.elementor .cp-woo .woocommerce-Address {
  padding: var(--s-24);
  border: var(--border-width-s) solid var(--color-border);
  border-radius: var(--radius-m);
}

.elementor .cp-woo .woocommerce-Address address {
  font-style: normal;
  line-height: 24px;
  color: var(--color-body);
}

/* confirmation de commande (gabarit thankyou.php du thème) et détails de commande */
.elementor .cp-woo .woocommerce-order h2.woocommerce-thankyou-order-received,
.elementor .cp-woo .woocommerce-order .woocommerce-notice--success {
  margin-bottom: var(--s-24);
  font-size: 32px !important;
  line-height: 40px !important;
}

.elementor .cp-woo ul.woocommerce-order-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-24) var(--s-40);
  margin: 0 0 var(--s-40);
  padding: var(--s-24);
  border: var(--border-width-s) solid var(--color-border);
  border-radius: var(--radius-l);
  list-style: none;
}

.elementor .cp-woo ul.woocommerce-order-overview li {
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-body);
}

.elementor .cp-woo ul.woocommerce-order-overview li strong {
  display: block;
  margin-top: var(--s-4);
  font-size: 18px !important;
  font-weight: 500;
  line-height: 26px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-secondary);
}

.elementor .cp-woo .woocommerce-order-details,
.elementor .cp-woo .woocommerce-customer-details,
.elementor .cp-woo .woocommerce-order-downloads {
  margin-bottom: var(--s-40);
}

.elementor .cp-woo .woocommerce-order-details h2,
.elementor .cp-woo .woocommerce-customer-details h2,
.elementor .cp-woo .woocommerce-order-downloads h2 {
  margin-bottom: var(--s-16);
}

/* reprise de l'ancienne feuille screen.css : liste des cartes cadeaux téléchargeables (gifts.php, order-downloads.php) */
.elementor .cp-woo .prana-downloadable-list {
  margin-bottom: var(--s-16);
  padding-bottom: var(--s-16);
  border-bottom: var(--border-width-s) solid var(--color-border);
}

@media (max-width: 767px) {
  .elementor .cp-woo .elementor-widget-woocommerce-cart,
  .elementor .cp-woo .elementor-widget-woocommerce-checkout-page,
  .elementor .cp-woo .elementor-widget-woocommerce-my-account {
    --sections-padding: var(--s-20);
    --sections-border-radius: var(--radius-m);
    --tab-content-spacing: var(--s-24);
  }

  .elementor .cp-woo h2,
  .elementor .cp-woo h3,
  .elementor .cp-woo h4 {
    font-size: 20px !important;
    line-height: 26px !important;
  }

  .elementor .cp-woo .woocommerce-order h2.woocommerce-thankyou-order-received {
    font-size: 24px !important;
    line-height: 30px !important;
  }

  .elementor .cp-woo ul.woocommerce-order-overview {
    flex-direction: column;
    gap: var(--s-16);
  }
}

/* --- 1.17.1 (étape 10, clôture) · nettoyage : le !important de la police des boutons Woo (bloc 1.9.0) est retiré, la feuille legacy
   screen.css ayant été décrochée (allègement A6). Aucune autre règle modifiée. */

/* --- 1.18.0 (étape 11, accessibilité) · lien d'évitement « Aller au contenu » et repère main ----------
   Le lien est imprimé par functions/accessibilite.php avant l'en-tête du Theme Builder ; invisible hors focus (hors écran,
   mais lu par les lecteurs d'écran), il apparaît en haut à gauche au premier Tab, sous la barre d'administration quand elle
   est là. <main id="contenu" tabindex="-1"> reçoit le focus après activation du lien, sans anneau : la cible n'est pas
   interactive. Couleurs : cacao sur blanc crème, comme les boutons secondaires sur fond sombre.
   1.18.1 : sélecteur `body a.prana-skip` (0,1,2), car le lien global du kit `.elementor-kit-5 a` (0,1,1) repeignait le texte en
   terracotta (contrôle du 09/10/2026 après dépôt). */
body a.prana-skip {
  position: absolute;
  left: var(--s-16);
  top: calc(var(--s-16) + var(--wp-admin--admin-bar--height, 0px));
  z-index: 10001;
  padding: var(--s-12) var(--s-20);
  border-radius: var(--radius-pill);
  background: var(--color-secondary);
  color: var(--color-white);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-300%);
  opacity: 0;
}

body a.prana-skip:focus,
body a.prana-skip:focus-visible {
  transform: none;
  opacity: 1;
  outline: 2px solid var(--color-white);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--color-secondary);
}

.prana-main:focus {
  outline: none;
}

/* 1.18.0 · commande : WooCommerce laisse un <h3> vide au-dessus des champs complémentaires quand le champ « notes » est
   désactivé (titre vide pour les lecteurs d'écran, relevé le 09/10/2026) ; on le retire du flux. */
.elementor .cp-woo h3:empty {
  display: none;
}