/* ==========================================================================
   IVORY INTERIORS — Brand customisation for Nordic theme
   Charte graphique : Chloé Camille © 2026
   --------------------------------------------------------------------------
   Sommaire :
     1. Webfonts (auto-hébergées)
     2. Variables de marque (palette + typos)
     3. Typographie globale
     4. Liens, boutons, formulaires
     5. Retours client (visionnage 2026-05-17)
        5.a. Bouton "Voir nos projets" → soulignement au hover
        5.b. Indicateur scroll : remplacement double flèche
        5.c. Bouton "remonter en haut" → monogramme
        5.d. Témoignages : typo plus fine, moins gras
        5.e. Footer / copyright : typo Figtree, plus discret
        5.f. Page actualités : sortir du look "template"
   ========================================================================== */

/* 1. WEBFONTS ============================================================== */
/* Fichiers fournis par la cliente, déposés dans nordic-child/assets/fonts/.   */
/* (Latienne Becker = corps de texte ; Latienne Swash T = display décoratif.) */

@font-face {
  font-family: "Latienne Becker";
  src: url("../fonts/Latienne-Becker-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Latienne Becker";
  src: url("../fonts/Latienne-Becker-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Latienne Swash T";
  src: url("../fonts/Latienne-Swash-T-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. VARIABLES DE MARQUE =================================================== */

:root {
  /* Palette officielle */
  --ivory-bordeaux: #520f1a;
  --ivory-ivoire: #f4eee2;
  --ivory-olive: #716627;
  --ivory-beige: #dfcdb7;
  --ivory-chocolat: #3c241b;

  /* Familles typographiques (cf. charte Chloé Camille) */
  --ivory-font-display:
    "Latienne Swash T", "Latienne Becker", Georgia, "Times New Roman", serif;
  --ivory-font-body: "Latienne Becker", Georgia, "Times New Roman", serif;
  --ivory-font-sans:
    "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Override variables Nordic */
  --primary-color: var(--ivory-bordeaux);
  --secondary-color: var(--ivory-chocolat);
  --third-color: var(--ivory-olive);
  --dark-color: var(--ivory-chocolat);
  --body-bg-color: var(--ivory-ivoire);
  --link-color: var(--ivory-bordeaux);
  --link-color-hover: var(--ivory-olive);
  --link-color-active: var(--ivory-bordeaux);
  --heading: var(--ivory-bordeaux);
  --text: var(--ivory-chocolat);
}

/* 3. TYPOGRAPHIE GLOBALE =================================================== */

body {
  font-family: var(--ivory-font-body);
  color: var(--ivory-chocolat);
  background-color: var(--ivory-ivoire);
}

/* Titres = display serif (Tan Waltzing Mathilde) */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
.pxl-heading .pxl-item--title,
.pxl-item-title,
.pxl-item--title,
.entry-title,
.page-title,
.widget-title,
.pxl-widget-title {
  font-family: var(--ivory-font-display);
  color: var(--ivory-bordeaux);
  font-weight: 400;
  letter-spacing: 0.01em;
}

/* Surlignes / labels / UI = Figtree en CAPS espacées */
.pxl-heading .pxl-item--subtitle,
.pxl-eyebrow,
.pxl-label,
.pxl-menu .menu > li > a,
.pxl-item--category,
.pxl-item--meta,
.btn,
button,
.pxl-btn,
.wp-block-button__link,
input[type="submit"],
.pxl-pagination-wrap .page-numbers {
  font-family: var(--ivory-font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Italique = uniquement Latienne Pro (jamais d'italique sur Tan) */
em,
i,
cite,
blockquote {
  font-family: var(--ivory-font-body);
  font-style: italic;
}

/* 4. LIENS, BOUTONS, FORMULAIRES =========================================== */

a {
  color: var(--ivory-bordeaux);
  transition:
    color 0.25s ease,
    opacity 0.25s ease;
}
a:hover {
  color: var(--ivory-olive);
}

/* Inputs & textareas — style Ivory par DÉFAUT sur TOUT le site.
   Les !important font gagner ce style même là où Elementor / Nordic / un widget
   form impose le sien : « si on ne met rien, c'est le style Ivory ». Pour un
   champ qui doit déroger, surcharger explicitement (classe dédiée + valeur).
   Police FLUIDE via clamp() (min 16px pour éviter le zoom auto iOS au focus). */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"],
textarea,
select,
.elementor-field-textual,
.wpcf7-form-control:not([type="submit"]):not([type="button"]),
.pxl-contact-form input:not([type="submit"]),
.pxl-contact-form textarea,
.pxl-contact-form select {
  font-family: var(--ivory-font-body) !important;
  font-size: clamp(16px, 1.4vw, 18px) !important;
  color: var(--ivory-chocolat) !important;
  background-color: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(82, 15, 26, 0.25) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease;
}
input:focus,
textarea:focus,
select:focus,
.elementor-field-textual:focus,
.wpcf7-form-control:focus,
.pxl-contact-form input:focus,
.pxl-contact-form textarea:focus,
.pxl-contact-form select:focus {
  outline: none !important;
  border-bottom-color: var(--ivory-bordeaux) !important;
}
/* Placeholders en Latienne, ton estompé */
input::placeholder,
textarea::placeholder,
.elementor-field-textual::placeholder {
  font-family: var(--ivory-font-body) !important;
  color: rgba(60, 36, 27, 0.45) !important;
  opacity: 1;
}

/* 5. RETOURS CLIENT ======================================================== */

/* 5.a. Bouton "Voir nos projets" et boutons soulignés ---------------------- */
/* La cliente : "Je ne ressens pas le besoin de cette fine ligne qui le      */
/* souligne — quelque chose de plus léger, en typo Victory."                 */

.pxl-button.style-line .btn,
.pxl-btn.style-line,
a.btn-link,
a.btn-underline,
.pxl-btn--underline,
.elementor-button.style-line {
  border-bottom: 0 !important;
  text-decoration: none !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 6px;
  font-family: var(--ivory-font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-bordeaux);
}
.pxl-button.style-line .btn::after,
.pxl-btn.style-line::after,
a.btn-link::after,
a.btn-underline::after,
.pxl-btn--underline::after,
.elementor-button.style-line::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.pxl-button.style-line .btn:hover::after,
.pxl-btn.style-line:hover::after,
a.btn-link:hover::after,
a.btn-underline:hover::after,
.pxl-btn--underline:hover::after,
.elementor-button.style-line:hover::after {
  width: 100%;
}
/* Monogramme à gauche du label : léger glissement au survol */
.pxl-button.style-line .btn .pxl-btn-icon,
.pxl-btn.style-line .pxl-btn-icon {
  transition: transform 0.4s ease;
}
.pxl-button.style-line .btn:hover .pxl-btn-icon,
.pxl-btn.style-line:hover .pxl-btn-icon {
  transform: translateX(-4px);
}

/* 5.b. Indicateur de scroll (remplace la "double flèche") ------------------ */
/* Masque toutes les variantes de double-flèche que Nordic peut injecter.     */

.pxl-banner-scroll-down,
.pxl-scroll-down,
.scroll-down,
.swiper-scroll-down,
.pxl-icon-down,
.hero-scroll-arrow,
.banner-scroll,
.pxl-hero-scroll,
.pxl-banner-arrow {
  display: none !important;
}

/* Drop-in à insérer dans un bloc HTML personnalisé du hero :
     <div class="ivory-scroll-hint" onclick="window.scrollTo({top: window.innerHeight, behavior:'smooth'})">
       <span class="ivory-line-track"><span class="ivory-line-fill"></span></span>
     </div>
  */
.ivory-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  cursor: pointer;
}
.ivory-scroll-hint .ivory-line-track {
  display: block;
  width: 1px;
  height: 60px;
  background: rgba(244, 238, 226, 0.25);
  overflow: hidden;
  position: relative;
}
.ivory-scroll-hint .ivory-line-fill {
  position: absolute;
  top: -60px;
  left: 0;
  width: 1px;
  height: 60px;
  background: var(--ivory-ivoire);
  animation: ivory-line-slide 2.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes ivory-line-slide {
  0% {
    top: -60px;
  }
  60% {
    top: 60px;
  }
  100% {
    top: 60px;
  }
}
.ivory-scroll-hint:hover .ivory-line-fill {
  animation-duration: 1.4s;
}

/* Variante fond clair : bordeaux au lieu de l'ivoire */
.ivory-scroll-hint.is-light .ivory-line-track {
  background: rgba(82, 15, 26, 0.2);
}
.ivory-scroll-hint.is-light .ivory-line-fill {
  background: var(--ivory-bordeaux);
}

/* 5.c. Bouton "remonter en haut" → monogramme ----------------------------- */
/* La cliente : "Je ne suis pas hyper fan de ce bouton — peut-être le        */
/* monogramme."  Uploader le monogramme dans Médias et coller l'URL.         */

.pxl-totop,
.scroll-top,
#back-to-top,
.back-to-top,
.pxl-back-top {
  background-image: url("../img/ivory-monogram.svg") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 22px auto !important;
  background-color: transparent !important;
  border: 1px solid var(--ivory-bordeaux) !important;
  color: transparent !important;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  transition:
    background-color 0.25s ease,
    transform 0.25s ease;
}
.pxl-totop:hover,
.scroll-top:hover,
#back-to-top:hover,
.back-to-top:hover,
.pxl-back-top:hover {
  background-color: var(--ivory-bordeaux) !important;
  transform: translateY(-3px);
}
.pxl-totop i,
.scroll-top i,
#back-to-top i,
.back-to-top i,
.pxl-back-top i {
  display: none !important;
}

/* 5.d. Témoignages — typo plus fine, moins lourde ------------------------- */
/* La cliente : "Ces textes sont trop gros, un peu trop trop trop gras."     */

.pxl-test-carousel1 .pxl-item--text,
.pxl-test-carousel2 .pxl-item--text,
.pxl-testimonial-carousel .pxl-item--text,
.pxl-testimonial .pxl-item--text {
  font-family: var(--ivory-font-body) !important;
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ivory-chocolat);
}
.pxl-testimonial .pxl-item--author,
.pxl-test-carousel1 .pxl-item--author,
.pxl-test-carousel2 .pxl-item--author {
  font-family: var(--ivory-font-sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

/* 5.e. Footer / copyright — typo Figtree, plus discret -------------------- */
/* La cliente : "Problème de typo sur le copyright, c'est un peu lourd."     */

.pxl-footer-bottom,
.site-footer .copyright,
.pxl-copyright,
[class*="copyright"] {
  font-family: var(--ivory-font-sans) !important;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--ivory-beige);
}

/* 5.f. Page actualités — sortir du look "template" ------------------------ */
/* La refonte complète vit dans `assets/css/ivory-blog.css` (refonte         */
/* éditoriale magazine : Une pleine largeur + grille asymétrique alternée +  */
/* numérotation + sidebar bordeaux affinée). Rien à mettre ici.              */

/* 6. ENCART BORDEAUX (héros / sections d'accent) =========================== */
/* Pour les blocs qui doivent reprendre le code couleur fort de la marque.   */

.is-bordeaux-section,
.section--bordeaux {
  background-color: var(--ivory-bordeaux);
  color: var(--ivory-ivoire);
}
.is-bordeaux-section h1,
.is-bordeaux-section h2,
.is-bordeaux-section h3,
.is-bordeaux-section h4,
.is-bordeaux-section h5,
.is-bordeaux-section h6,
.section--bordeaux h1,
.section--bordeaux h2,
.section--bordeaux h3,
.section--bordeaux h4,
.section--bordeaux h5,
.section--bordeaux h6 {
  color: var(--ivory-ivoire);
}
.is-bordeaux-section a,
.section--bordeaux a {
  color: var(--ivory-beige);
}
.is-bordeaux-section a:hover,
.section--bordeaux a:hover {
  color: var(--ivory-ivoire);
}

/* 7. UTILITAIRES ÉDITORIAUX ================================================ */
/* À utiliser comme "CSS class" sur un widget Heading/Text Elementor.        */
/* Permet de poser un eyebrow CAPS + un filet décoratif au-dessus / dessous   */
/* d'un titre de page (Actualités, Projets, À propos…) sans toucher au PHP.   */

/* Eyebrow Figtree CAPS olive — usage : Heading widget Elementor class       */
/* "ivory-eyebrow" avec texte "Journal — Édition 2026".                       */
.ivory-eyebrow,
.ivory-eyebrow .elementor-heading-title,
.ivory-eyebrow .pxl-item--title {
  font-family: var(--ivory-font-sans) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.34em !important;
  text-transform: uppercase !important;
  color: var(--ivory-olive) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

/* Filet décoratif horizontal centré — usage : Divider Elementor avec class  */
/* "ivory-filet" OU bloc HTML <span class="ivory-filet"></span>.              */
.ivory-filet,
hr.ivory-filet,
.elementor-divider.ivory-filet .elementor-divider-separator {
  display: block;
  width: 56px;
  height: 1px;
  margin: 26px auto;
  background: var(--ivory-bordeaux);
  border: 0;
  opacity: 0.45;
}
/* Variante ivoire pour fond bordeaux */
.ivory-filet.is-light,
hr.ivory-filet.is-light {
  background: var(--ivory-ivoire);
  opacity: 0.35;
}

/* Sous-titre éditorial italique (Latienne) — usage : Text Editor Elementor   */
/* class "ivory-leadin".                                                      */
.ivory-leadin,
.ivory-leadin p,
.ivory-leadin .elementor-widget-container p {
  font-family: var(--ivory-font-body) !important;
  font-style: italic;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--ivory-chocolat) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  opacity: 0.8;
  margin: 0;
}

/* ==========================================================================
     8. BOUTON MONOGRAMME RÉUTILISABLE  (.ivory-btn-monogram)
     ==========================================================================
     Pattern : texte Figtree CAPS bordeaux + monogramme SVG (déjà inline dans
     le widget pxl_button OU ajouté en ::after pour les autres cas) + filet
     bordeaux qui se trace sous le label au survol.
  
     USAGE :
  
     A. Widget Nordic « pxl_button » (le plus courant sur ce site) :
        Onglet Avancé du widget → champ CSS Classes : ivory-btn-monogram
        Le widget sort déjà <svg>monogramme</svg> + <span class="pxl--btn-text">.
        Notre CSS le détecte et applique le pattern.
  
     B. Bouton Elementor natif :
        Onglet Avancé → CSS Classes : ivory-btn-monogram
        Idem pour .elementor-button-text.
  
     C. HTML libre (HTML widget) :
        <a href="..." class="ivory-btn-monogram">
            <span class="pxl--btn-text">En savoir plus</span>
        </a>
  
     D. Sur fond bordeaux → ajouter aussi `is-light` :
        ivory-btn-monogram is-light
     ========================================================================== */

/* Quand .ivory-btn-monogram est posée sur le WRAPPER widget Elementor,       */
/* on déboule jusqu'au <a class="btn"> à l'intérieur. La règle suivante       */
/* couvre les deux cas : (1) classe sur l'élément <a> lui-même                */
/* (HTML libre / Elementor button), (2) classe sur le wrapper widget Nordic. */

.ivory-btn-monogram,
.ivory-btn-monogram .btn,
.ivory-btn-monogram a.btn,
.ivory-btn-monogram .elementor-button,
.ivory-btn-monogram > a,
a.ivory-btn-monogram,
button.ivory-btn-monogram {
  display: inline-flex !important;
  align-items: center;
  gap: 14px;
  padding: 0 0 6px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: var(--ivory-bordeaux) !important;
  font-family: var(--ivory-font-sans) !important;
  /* Police fluide : suit la largeur de l'écran entre 14px et 22px */
  font-size: clamp(14px, 2.8vw, 22px) !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  position: relative;
  box-shadow: none !important;
  cursor: pointer;
  line-height: 1.2;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
  min-height: 0 !important;
}

/* Si .ivory-btn-monogram est sur le wrapper, le wrapper lui-même n'a pas
     besoin du padding/border (on le neutralise pour qu'il soit transparent). */
.ivory-btn-monogram.elementor-element,
.ivory-btn-monogram.elementor-widget {
  display: inline-block !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}
.ivory-btn-monogram .elementor-widget-container,
.ivory-btn-monogram .pxl-button {
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* SVG monogramme inline (déjà fourni par pxl_button) — on le sort en taille
     compacte 18px et on prépare son glissement au hover. */
.ivory-btn-monogram .btn > svg,
.ivory-btn-monogram .btn svg.pxl-icon,
.ivory-btn-monogram a.btn > svg {
  /* Monogramme fluide, proportionnel au label (22px → 33px) */
  width: clamp(22px, 4.2vw, 33px) !important;
  height: clamp(22px, 4.2vw, 33px) !important;
  flex-shrink: 0;
  display: inline-block !important;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  order: 0; /* monogramme à GAUCHE quel que soit pxl-icon--left/right */
}
/* Couleur du SVG : bordeaux par défaut */
.ivory-btn-monogram .btn > svg .st0,
.ivory-btn-monogram .btn > svg path,
.ivory-btn-monogram a.btn > svg path {
  fill: var(--ivory-bordeaux) !important;
  transition: fill 0.3s ease;
}

/* On masque l'éventuelle flèche SVG du parent Nordic (pas le monogramme) */
.ivory-btn-monogram .pxl-button-arrow,
.ivory-btn-monogram .elementor-button-icon {
  display: none !important;
}

/* Texte du label — couvre les 3 wrappers possibles                          */
.ivory-btn-monogram .pxl--btn-text,
.ivory-btn-monogram .elementor-button-text,
.ivory-btn-monogram .ivory-btn-monogram__text {
  position: relative;
  color: inherit;
  font-family: inherit;
  font-size: inherit; /* hérite du clamp fluide du bouton */
  letter-spacing: inherit;
  text-transform: inherit;
  font-weight: inherit;
  line-height: 1.2;
  order: 1; /* texte APRÈS le monogramme (qui est à gauche) */
}

/* Responsive : la police et le monogramme sont fluides via clamp() (cf. règles
     de base). Ici on ne gère plus que le CENTRAGE du groupe en mobile. */
@media (max-width: 767px) {
  /* En petit : on regroupe monogramme + texte au centre. Le vrai conteneur
     flex peut être le bouton OU le wrapper interne d'Elementor/pxl : on force
     le centrage sur tous les niveaux. */
  .ivory-btn-monogram,
  .ivory-btn-monogram .btn,
  .ivory-btn-monogram a.btn,
  .ivory-btn-monogram .elementor-button,
  .ivory-btn-monogram .elementor-button-content-wrapper,
  .ivory-btn-monogram .pxl-button-content,
  .ivory-btn-monogram > a,
  a.ivory-btn-monogram,
  button.ivory-btn-monogram {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    gap: 12px !important;
  }
  .ivory-btn-monogram .pxl--btn-text,
  .ivory-btn-monogram .elementor-button-text,
  .ivory-btn-monogram .ivory-btn-monogram__text {
    flex: 0 1 auto;
    text-align: center;
  }
}

/* Filet bordeaux qui se trace sous le label au hover (la signature Ivory) */
.ivory-btn-monogram .pxl--btn-text::after,
.ivory-btn-monogram .elementor-button-text::after,
.ivory-btn-monogram .ivory-btn-monogram__text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ivory-btn-monogram:hover .pxl--btn-text::after,
.ivory-btn-monogram:hover .elementor-button-text::after,
.ivory-btn-monogram:hover .ivory-btn-monogram__text::after,
.ivory-btn-monogram .btn:hover .pxl--btn-text::after,
.ivory-btn-monogram .btn:hover .elementor-button-text::after {
  width: 100%;
}

/* Le monogramme glisse de -4px à gauche au hover */
.ivory-btn-monogram:hover .btn > svg,
.ivory-btn-monogram .btn:hover > svg,
.ivory-btn-monogram:hover > svg,
.ivory-btn-monogram > a:hover svg {
  transform: translateX(-4px);
}

/* Fallback HTML libre (pas de SVG inline) : on injecte le monogramme via ::before
     (à GAUCHE du texte) plutôt que ::after. */
.ivory-btn-monogram:not(:has(svg))::before,
a.ivory-btn-monogram:not(:has(svg))::before {
  content: "";
  display: inline-block;
  margin-top: -5px;
  width: 34px;
  height: 33px;
  background: url(../img/ivory-monogram-bordeaux.svg) no-repeat center / contain;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  order: 0;
}
.ivory-btn-monogram:not(:has(svg)):hover::before {
  transform: translateX(-4px);
}
/* On désactive l'ancien ::after fallback s'il existait encore */
.ivory-btn-monogram:not(:has(svg))::after,
a.ivory-btn-monogram:not(:has(svg))::after {
  content: none !important;
}

/* Variante "is-light" — fond bordeaux : texte + monogramme en ivoire */
.ivory-btn-monogram.is-light,
.ivory-btn-monogram.is-light .btn,
.ivory-btn-monogram.is-light a.btn {
  color: var(--ivory-ivoire) !important;
}
.ivory-btn-monogram.is-light .btn > svg .st0,
.ivory-btn-monogram.is-light .btn > svg path,
.ivory-btn-monogram.is-light a.btn > svg path {
  fill: var(--ivory-ivoire) !important;
}
.ivory-btn-monogram.is-light:not(:has(svg))::after {
  background-image: url("../img/ivory-monogram-ivoire.svg");
}

/* Focus visible (accessibilité clavier) */
.ivory-btn-monogram:focus-visible,
.ivory-btn-monogram .btn:focus-visible,
.ivory-btn-monogram a.btn:focus-visible {
  outline: 2px solid var(--ivory-bordeaux);
  outline-offset: 4px;
  border-radius: 2px;
}
.ivory-btn-monogram.is-light:focus-visible,
.ivory-btn-monogram.is-light .btn:focus-visible {
  outline-color: var(--ivory-ivoire);
}

/* === FORMULAIRE DE CONTACT IVORY ====================================== */

/* Conteneur : pleine largeur, on neutralise les marges Bootstrap du .row */
.ivory-contact-form {
  width: 100%;
  max-width: none;
  margin: 0;
}
.ivory-contact-form .pxl-contact-inner,
.ivory-contact-form .pxl-inner-form {
  width: 100%;
}

/* Grid : gap horizontal et vertical identiques, et neutralisation des
   negative-margins Bootstrap pour que les 2 lignes aient EXACTEMENT la même
   largeur (col-12 unique vs col-6 + col-6). */
.ivory-contact-form .ivory-form-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 28px;
  row-gap: 26px;
  margin: 0 !important;
  width: 100%;
}
.ivory-contact-form .ivory-form-grid > [class*="col-"] {
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  flex: none !important;
}
.ivory-contact-form .ivory-form-grid > .col-lg-12 {
  grid-column: span 12;
}
.ivory-contact-form .ivory-form-grid > .col-lg-6 {
  grid-column: span 6;
}

@media (max-width: 991px) {
  .ivory-contact-form .ivory-form-grid > .col-md-12 {
    grid-column: span 12;
  }
  .ivory-contact-form .ivory-form-grid > .col-md-6 {
    grid-column: span 6;
  }
}
@media (max-width: 767px) {
  .ivory-contact-form .ivory-form-grid {
    column-gap: 0;
  }
  .ivory-contact-form .ivory-form-grid > [class*="col-"] {
    grid-column: span 12 !important;
  }
}

/* Champ : label CAPS au-dessus + input minimal */
.ivory-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.ivory-field__label {
  font-family: var(--ivory-font-sans);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ivory-bordeaux);
  line-height: 1;
}
.ivory-field__label span[aria-hidden] {
  opacity: 0.5;
}

/* Wrappers CF7 internes : doivent prendre 100% pour que l'input s'aligne */
.ivory-field .wpcf7-form-control-wrap,
.ivory-field span.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Inputs et textarea : box-sizing strict + padding ample identique sur tous */
.ivory-field input[type="text"],
.ivory-field input[type="email"],
.ivory-field input[type="tel"],
.ivory-field textarea {
  box-sizing: border-box;
  width: 100%;
  display: block;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(82, 15, 26, 0.22) !important;
  border-radius: 0 !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  font-family: var(--ivory-font-body);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ivory-chocolat);
  height: auto;
  transition: border-color 0.3s ease;
}
.ivory-field input:focus,
.ivory-field textarea:focus {
  outline: none;
  border-bottom-color: var(--ivory-bordeaux) !important;
}
.ivory-field input::placeholder,
.ivory-field textarea::placeholder {
  color: var(--ivory-chocolat);
  opacity: 0.35;
  font-style: italic;
}

/* Textarea : padding vertical un peu plus, hauteur min */
.ivory-field textarea {
  min-height: 160px;
  resize: vertical;
  line-height: 1.6;
  padding: 16px 0 !important;
}

/* Footer : alignement du bouton à droite + zone réponse CF7 */
.ivory-form-footer {
  display: flex !important;
  align-items: center;
  justify-content: flex-end;
  gap: 24px;
  margin-top: 16px;
  padding-top: 28px;
}
.ivory-form-footer .wpcf7-response-output {
  flex: 1;
  margin: 0 !important;
  padding: 10px 14px !important;
  border: 1px solid rgba(82, 15, 26, 0.2) !important;
  border-radius: 2px;
  font-family: var(--ivory-font-sans);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-bordeaux);
}
.wpcf7-not-valid-tip {
  font-family: var(--ivory-font-sans);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ivory-bordeaux);
  margin-top: 6px;
  opacity: 0.8;
}

/* Cache les icônes random Nordic / CF7 injectées dans les fields */
.ivory-field .wpcf7-form-control-wrap::after,
.ivory-field .pxl-form-icon,
.ivory-field .pxl-icon,
.ivory-field svg:not(.pxl-button-arrow) {
  display: none !important;
}

/* Mobile : bouton qui revient à gauche / pleine largeur */
@media (max-width: 600px) {
  .ivory-form-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .ivory-form-footer .contact-submit {
    align-self: flex-start;
  }
}

/* ============================================================
   PORTFOLIO — image cliquable (option opt-in)
   ------------------------------------------------------------
   Sur un widget « Case Post Grid » en Layout portfolio 1 (ou 2),
   l'image n'est par défaut PAS un lien : seul le titre l'est.
   Pour rendre l'image (et toute la carte) cliquable vers le projet,
   ajouter la classe « is-img-clickable » dans :
       Elementor → Avancé → CSS Classes du widget.
   Technique : on étire le lien titre déjà présent (.pxl-holder-link)
   sur toute la carte. Aucune modif PHP, marche aussi après
   loadmore / filtre (markup AJAX identique). C'est le pattern
   « encart cliquable » validé par la cliente (brief point 14).
   ============================================================ */
.is-img-clickable .pxl-portfolio-grid .pxl-post--inner {
  position: relative;
}
.is-img-clickable .pxl-portfolio-grid .pxl-featured-img {
  cursor: pointer;
}
/* Le lien du titre s'étire sur toute la carte, image comprise. */
.is-img-clickable .pxl-portfolio-grid .pxl-post--title .pxl-holder-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
/* Les vrais liens (catégorie, bouton « Détail ») restent cliquables. */
.is-img-clickable .pxl-portfolio-grid .pxl-post--category a,
.is-img-clickable .pxl-portfolio-grid .pxl-post--btn a {
  position: relative;
  z-index: 3;
}
/* Polish : survoler l'image trace le filet sous le titre. */
.is-img-clickable
  .pxl-portfolio-grid
  .pxl-post--inner:hover
  .title-hover-line
  a {
  animation: 0.6s cubic-bezier(0.215, 0.61, 0.355, 1)
    pxl-wide-menu-underline-hover forwards;
}

/* ============================================================
   FLÈCHES CARROUSEL — style-6 = style-5 (copie exacte)
   ------------------------------------------------------------
   Deux choses diffèrent entre style-5 et style-6 :
   1) Le BOUTON (rond outline) : le parent ne style QUE style-5.
      → on réplique les règles style-5 pour style-6.
      Réf. parent : nordic/assets/css/style.css (~ligne 40091).
   2) Le SVG (l'icône) : il n'est PAS piloté par la classe, il est
      codé EN DUR dans chaque template. style-5 = chevron fin 7×13
      (M6 1L1 6.5L6 12). style-6 utilise un autre SVG selon le
      template (gros chevron 17×37, flèche longue 21×13…).
      → impossible de le changer via la classe en pur CSS, donc on
      MASQUE le SVG d'origine de style-6 et on le remplace par une
      réplique exacte du chevron style-5 (mask CSS, data-URI),
      direction prev/gauche & next/droite, couleur #999 → --link-color
      au survol (identique au comportement style-5).
   ============================================================ */
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow {
  width: 55px;
  height: 55px;
  display: flex;
  border: 1px solid #999;
  background-color: transparent;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  margin: 5px;
  -webkit-transition: all 0.3s;
  -khtml-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow svg {
  -webkit-transition: all 0.3s;
  -khtml-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow svg path {
  stroke: #999;
  -webkit-transition: all 0.3s;
  -khtml-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow:hover {
  border-color: var(--link-color);
}
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow:hover svg path {
  stroke: var(--link-color);
}

/* --- Remplacement de l'icône : SVG d'origine masqué, chevron style-5 injecté --- */
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow svg {
  display: none;
}
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow::before {
  content: "";
  display: block;
  width: 7px;
  height: 13px;
  background-color: #999;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
/* Chevron gauche (prev) — réplique exacte du path style-5 "M6 1L1 6.5L6 12" */
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow-prev::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='13'%20viewBox='0%200%207%2013'%20fill='none'%3E%3Cpath%20d='M6%201L1%206.5L6%2012'%20stroke='black'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='13'%20viewBox='0%200%207%2013'%20fill='none'%3E%3Cpath%20d='M6%201L1%206.5L6%2012'%20stroke='black'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Chevron droit (next) — réplique exacte du path style-5 "M1 1L6 6.5L1 12" */
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow-next::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='13'%20viewBox='0%200%207%2013'%20fill='none'%3E%3Cpath%20d='M1%201L6%206.5L1%2012'%20stroke='black'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='7'%20height='13'%20viewBox='0%200%207%2013'%20fill='none'%3E%3Cpath%20d='M1%201L6%206.5L1%2012'%20stroke='black'%20stroke-width='1.5'%20stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Survol : la couleur du chevron suit --link-color (comme style-5). */
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow:hover::before {
  background-color: var(--link-color);
}

.pxl-image-carousel2 .pxl-item--inner:before {
  background-color: transparent;
}

/* --- Flèches style-6 placées EN BAS, centrées (au lieu des côtés) ---------
   Les widgets positionnent le wrap en absolute sur les côtés via des
   sélecteurs plus spécifiques (ex. .pxl-element-slider.style1 …,
   .pxl-image-carousel2 .pxl-carousel-inner …). On neutralise avec
   !important et on repasse le wrap en flux normal, rangée centrée en bas.
   Couvre aussi les flèches positionnées individuellement en absolute
   (image-carousel2 : prev left:20px / next right:20px). --------------------- */
.pxl-swiper-arrow-wrap.style-6 {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  width: 100% !important;
  margin: 24px auto 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
  z-index: 2;
}
.pxl-swiper-arrow-wrap.style-6 .pxl-swiper-arrow {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

.pxl-testimonial-carousel1 .pxl-item-inner {
  display: flex;
  flex-direction: column;
}
.elementor-element .pxl-testimonial-carousel .pxl-item-inner .pxl-item--desc {
  height: 100%;
}

/* ==========================================================================
   13. Responsive global — pas de débordement horizontal
   --------------------------------------------------------------------------
   Empêche le scroll horizontal accidentel (témoignages, carousels qui
   débordent à droite sur mobile). Voir retour cliente du 19/06/2026.
   ========================================================================== */

html,
body {
  overflow-x: hidden;
  max-width: 100vw;
}

.elementor-section-wrap,
.elementor-section,
.elementor-container,
.e-con,
.e-con-inner {
  max-width: 100vw;
}

/* --- Mobile ≤ 767 px : carousels et grilles confinés à la viewport --- */
@media (max-width: 767px) {
  .pxl-post-carousel,
  .pxl-testimonial-carousel,
  .pxl-image-carousel,
  .pxl-swiper-container,
  .swiper-container,
  .pxl-portfolio-carousel5,
  .pxl-post-carousel1 {
    max-width: 100vw !important;
    overflow: hidden !important;
  }

  /* Slides des carrousels Nordic (Case-Themes) : 92vw pour montrer un peeky
     de la slide suivante. NE PAS inclure .swiper-slide tout court : le
     background-slideshow Elementor (hero) l'utilise aussi et a besoin
     de 100vw pleins. */
  .pxl-portfolio-carousel5 .swiper-slide,
  .pxl-post-carousel1 .swiper-slide,
  .pxl-image-carousel .swiper-slide,
  .pxl-image-carousel .pxl-swiper-slide,
  .pxl-testimonial-carousel .pxl-swiper-slide {
    max-width: 100vw !important;
  }

  /* Filet de sécurité : aucun élément Elementor ne déborde */
  [class*="elementor-element"] {
    max-width: 100% !important;
  }

  /* Galerie masonry des fiches projet : pleine largeur, pas de fuite */
  .elementor-widget-gallery .elementor-grid {
    max-width: 100%;
  }
}

/* ==========================================================================
   14. Titres TANWALTZING MATHILDE — fix crop
   --------------------------------------------------------------------------
   Cette typo display a une hauteur de glyphe très importante. Avec un
   line-height par défaut (1) elle se fait rogner en haut ET en bas
   (T, L, A coupés). On force un line-height plus généreux + un peu de
   respiration verticale, partout où elle est utilisée.
   ========================================================================== */

.elementor-widget-theme-page-title .elementor-heading-title,
.elementor-widget-heading .elementor-heading-title,
.pxl-heading .pxl-item--title,
.ivory-ptitle .ivory-ptitle__title,
.ivory-ptitle__title,
[style*="TANWALTZING MATHILDE"],
[style*="TANWALTZING-MATHILDE"],
[style*="Latienne Swash"],
[style*="Latienne-Swash"] {
  line-height: 1.35 !important;
  padding-top: 0.18em !important;
  padding-bottom: 0.12em !important;
  overflow: visible !important;
}

/* Containers parents : pas de débordement vertical qui re-couperait */
.elementor-widget-theme-page-title,
.elementor-widget-heading,
.elementor-widget-pxl_heading,
.elementor-widget-pxl_ivory_page_title,
.ivory-ptitle,
.ivory-ptitle__inner,
.ivory-ptitle .container,
.pxl-page-title,
.pxl-page-title__content,
.pxl-page-title__inner {
  overflow: visible !important;
}

/* ==========================================================================
   15. Témoignages — recentrage mobile (bloc bordeaux Home)
   --------------------------------------------------------------------------
   Sur mobile le carrousel témoignages dans le bloc bordeaux s'aligne
   à gauche. On force le centrage du texte, des étoiles et du nom
   pour respecter la mise en page éditoriale Ivory.
   ========================================================================== */

@media (max-width: 767px) {
  .elementor-widget-pxl_testimonial_slider,
  .elementor-widget-pxl_testimonial_carousel,
  .elementor-widget-pxl_testimonial {
    text-align: center;
  }

  .elementor-widget-pxl_testimonial_slider .pxl-testimonial--inner,
  .elementor-widget-pxl_testimonial_slider .pxl-testimonial--content,
  .elementor-widget-pxl_testimonial_carousel .pxl-testimonial--inner,
  .elementor-widget-pxl_testimonial_carousel .pxl-testimonial--content,
  .elementor-widget-pxl_testimonial .pxl-testimonial--inner,
  .elementor-widget-pxl_testimonial .pxl-testimonial--content {
    text-align: center;
    align-items: center;
    justify-content: center;
  }

  .elementor-widget-pxl_testimonial_slider .pxl-testimonial--description,
  .elementor-widget-pxl_testimonial_slider .pxl-testimonial--info,
  .elementor-widget-pxl_testimonial_slider .pxl-testimonial--name,
  .elementor-widget-pxl_testimonial_slider .pxl-testimonial--position,
  .elementor-widget-pxl_testimonial_slider .pxl-testimonial--rating,
  .elementor-widget-pxl_testimonial_carousel .pxl-testimonial--description,
  .elementor-widget-pxl_testimonial_carousel .pxl-testimonial--info,
  .elementor-widget-pxl_testimonial_carousel .pxl-testimonial--name,
  .elementor-widget-pxl_testimonial_carousel .pxl-testimonial--position,
  .elementor-widget-pxl_testimonial_carousel .pxl-testimonial--rating {
    text-align: center;
    justify-content: center;
    width: 100%;
  }

  /* Étoiles centrées */
  .elementor-widget-pxl_testimonial_slider .pxl-rating,
  .elementor-widget-pxl_testimonial_carousel .pxl-rating,
  .elementor-widget-pxl_testimonial .pxl-rating {
    display: flex;
    justify-content: center;
  }
}

/* ==========================================================================
   16. Menu burger — overlay plein écran (mobile + tablette)
   --------------------------------------------------------------------------
   Quand l'utilisateur ouvre le menu burger Elementor Pro Nav Menu :
   – fond beige plein écran
   – items en Figtree CAPS bordeaux, gros caractères
   – soulignement (filet) qui se trace au hover
   – le sélecteur de langue Polylang est intégré en bas, même style
   ========================================================================== */

/* Conteneur dropdown du nav-menu Elementor en mode burger.
   Elementor injecte des styles inline (top, left, width, --menu-height) sur ce
   conteneur — on les écrase avec !important pour forcer un overlay plein écran. */
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
  background-color: var(--e-global-color-secondary) !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  --menu-height: 100vh !important;
  z-index: 9998 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  padding: 80px 24px 40px !important;
  overflow-y: auto !important;
}

/* La liste verticale prend toute la largeur, centrée */
.elementor-nav-menu--dropdown .elementor-nav-menu,
.elementor-nav-menu__container.elementor-nav-menu--dropdown
  .elementor-nav-menu {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Items du burger */
.elementor-nav-menu--dropdown .elementor-nav-menu li {
  width: 100%;
  text-align: center;
}

.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item,
.elementor-nav-menu--dropdown .elementor-nav-menu .elementor-item {
  font-family: var(
    --ivory-font-sans,
    "Figtree",
    system-ui,
    sans-serif
  ) !important;
  font-weight: 500 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ivory-bordeaux, #520f1a) !important;
  background: transparent !important;
  border: 0 !important;
  padding: 18px 8px !important;
  text-align: center !important;
  position: relative;
  display: inline-block;
  transition: color 0.25s ease;
}

/* Filet qui se trace sous l'item au hover */
.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 0;
  height: 1px;
  background-color: var(--ivory-bordeaux, #520f1a);
  transition:
    width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    left 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.elementor-nav-menu--dropdown .elementor-nav-menu a.elementor-item:hover::after,
.elementor-nav-menu--dropdown
  .elementor-nav-menu
  a.elementor-item.elementor-item-active::after,
.elementor-nav-menu--dropdown
  .elementor-nav-menu
  li:hover
  > a.elementor-item::after {
  width: 60%;
  left: 20%;
}

/* Sélecteur de langue Polylang dans le burger mobile, en accordion :
   - Le placeholder #pll_switcher est transformé par functions.php §7 en item
     PARENT « Langues / Languages » avec sous-items FR/EN ;
   - Elementor Nav Menu ouvre/ferme le sub-menu nativement au clic sur le parent
     (via la classe .elementor-active) ;
   - On masque tout ça en desktop (un switcher .cpel-switcher est déjà au header).
*/

/* --- DESKTOP : tout masqué dans le menu principal -------------------------- */
.elementor-nav-menu--main .lang-item,
.elementor-nav-menu--main .menu-item-language,
.elementor-nav-menu--main .ivory-lang-parent,
.elementor-nav-menu--main .pll-parent-menu-item {
  display: none !important;
}

/* --- MOBILE (dropdown) : parent + sous-items stylés ------------------------ */

/* Parent « Langues / Languages » : on laisse Elementor gérer son indicator
   natif (l'icône +/− du widget Nav Menu en mode dropdown) — pas de caret
   custom, pas d'animation rotate. Le clic toggle ouvre le sous-menu.
   Indicator placé à droite UNIQUEMENT pour ce parent (pas les autres). */
.elementor-nav-menu--dropdown .ivory-lang-parent > a.elementor-item {
  cursor: pointer;
}
.elementor-nav-menu--dropdown .ivory-lang-parent > a.elementor-item .sub-arrow,
.elementor-nav-menu--dropdown .ivory-lang-parent > a.elementor-item > i,
.elementor-nav-menu--dropdown
  .ivory-lang-parent
  > a.elementor-item
  > .caret-icon,
.elementor-nav-menu--dropdown .ivory-lang-parent .elementor-menu-toggle {
  float: right;
  margin-left: 8px;
}

/* Sous-menu : même fond que l'overlay du burger (secondary = ivoire). */
.elementor-nav-menu--dropdown .ivory-lang-parent .sub-menu,
.elementor-nav-menu--dropdown .ivory-lang-parent .elementor-nav-menu--dropdown {
  background-color: var(--e-global-color-secondary) !important;
  text-align: center;
}

/* Sous-items FR / EN : Figtree CAPS bordeaux sur fond secondary.
   Au hover : inversion → fond primary (bordeaux), texte secondary (ivoire). */
.elementor-nav-menu--dropdown .ivory-lang-parent .sub-menu a,
.elementor-nav-menu--dropdown .ivory-lang-parent .elementor-sub-item {
  font-family: var(
    --ivory-font-sans,
    "Figtree",
    system-ui,
    sans-serif
  ) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--e-global-color-primary) !important;
  background-color: var(--e-global-color-secondary) !important;
  padding: 14px 8px !important;
  text-align: center;
  transition:
    background-color 0.25s ease,
    color 0.25s ease;
}

.elementor-nav-menu--dropdown .ivory-lang-parent .sub-menu a:hover,
.elementor-nav-menu--dropdown .ivory-lang-parent .sub-menu a:focus,
.elementor-nav-menu--dropdown .ivory-lang-parent .elementor-sub-item:hover,
.elementor-nav-menu--dropdown .ivory-lang-parent .elementor-sub-item:focus {
  color: var(--e-global-color-secondary) !important;
  background-color: var(--e-global-color-primary) !important;
}

.elementor-nav-menu--dropdown .lang-item a,
.elementor-nav-menu--dropdown .pll-parent-menu-item a,
.elementor-nav-menu--dropdown .menu-item-language a {
  font-family: var(
    --ivory-font-sans,
    "Figtree",
    system-ui,
    sans-serif
  ) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.28em !important;
  text-transform: uppercase !important;
  color: var(--ivory-bordeaux, #520f1a) !important;
  opacity: 0.7;
}

.elementor-nav-menu--dropdown .lang-item.current-lang a,
.elementor-nav-menu--dropdown .lang-item-current a {
  opacity: 1;
  font-weight: 500 !important;
}

/* Icône burger / close : bordeaux sur fond beige */
.elementor-menu-toggle {
  color: var(--ivory-bordeaux, #520f1a) !important;
  background: transparent !important;
}

.elementor-menu-toggle.elementor-active {
  color: var(--ivory-bordeaux, #520f1a) !important;
  z-index: 9999 !important;
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
}

.elementor-menu-toggle svg,
.elementor-menu-toggle i {
  fill: var(--ivory-bordeaux, #520f1a) !important;
  color: var(--ivory-bordeaux, #520f1a) !important;
}

/* Bloquer le scroll du body quand le menu est ouvert */
body:has(.elementor-menu-toggle.elementor-active) {
  overflow: hidden;
}

/* ==========================================================================
   17. Hero — slideshow background Elementor : fix « 2 images superposées » mobile
   --------------------------------------------------------------------------
   Problème observé sur la home (container 73c3cc4) : sur mobile, le
   slideshow background d'Elementor (4 images Tanagra + Ken Burns) laisse
   parfois la slide précédente partiellement visible derrière la slide
   active. Causes possibles : transitions opacity non terminées, ken burns
   qui élargit la slide et révèle la couche en-dessous, will-change qui
   crée un nouveau contexte d'empilement instable sur certains mobiles.

   Fix : sur mobile, on force les slides non-actives à opacity:0, on
   désactive le ken burns (qui amplifie le glitch sur petite hauteur),
   et on garantit que le wrapper du slideshow couvre exactement le hero.
   ========================================================================== */

@media (max-width: 767px) {
  /* OVERFLOW GLOBAL : sur mobile on bloque tout débordement horizontal au
     niveau html + body, peu importe la page. Sans ça, n'importe quel
     widget (slideshow plein écran, container full-bleed, etc.) qui dépasse
     d'1 pixel crée une bande de fond clair à droite. */
  html,
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* CONTAINER hero (id=73c3cc4 sur home FR + EN) : force la pleine largeur
     viewport en cassant le padding/margin de ses parents (technique
     « full-bleed » avec calc(50% - 50vw) qui aspire toute la largeur dispo).
     Sans ça, un padding latéral hérité créait une bande blanche à droite. */
  .elementor-element-73c3cc4,
  .elementor-page-5011 .elementor-element-73c3cc4,
  .elementor-page-17453 .elementor-element-73c3cc4 {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
  }

  /* Wrapper + container du slideshow : on enferme strictement la transformation
     Ken Burns pour qu'elle ne déborde JAMAIS du hero (sinon on aperçoit la
     slide d'en-dessous par les bords). */
  .elementor-element[data-id] > .elementor-background-slideshow,
  .elementor-background-slideshow {
    overflow: hidden !important;
    isolation: isolate;
    inset: 0 !important;
    width: 100vw !important;
    height: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }
  body.single-portfolio
    .elementor-element[data-id]
    > .elementor-background-slideshow,
  body.single-portfolio .elementor-background-slideshow {
    margin-right: -5px;
  }

  /* Chaque slide occupe exactement le wrapper, jamais plus. */
  .elementor-background-slideshow .swiper-slide,
  .elementor-background-slideshow__slide__image {
    width: 100vw !important;
    height: 100% !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
  }

  /* Slide active 100% opaque, toutes les autres totalement masquées :
     empêche le ghost de la slide d'avant/d'après pendant la transition. */
  .elementor-background-slideshow .swiper-slide {
    opacity: 0 !important;
    transition: opacity 1s ease !important;
  }
  .elementor-background-slideshow .swiper-slide-active {
    opacity: 1 !important;
  }

  /* Ken Burns RÉACTIVÉ sur mobile : on laisse l'animation native Elementor
     fonctionner. transform-origin centré + will-change pour rendu fluide. */
  .elementor-background-slideshow__slide__image,
  .elementor-background-slideshow
    .swiper-slide-active
    .elementor-background-slideshow__slide__image {
    transform-origin: center center !important;
    will-change: transform, opacity;
  }

  /* Carousels d'images Nordic (pxl_image_carousel) : 1 slide pleine largeur
     sur mobile. Les settings col_md/sm/xs sont aussi à "1" côté widget, mais
     selon la build Nordic le nom du breakpoint peut différer ; ce filet CSS
     force quoi qu'il arrive 1 slide visible. */
  .pxl-image-carousel .swiper-slide,
  .pxl-image-carousel .pxl-swiper-slide,
  .elementor-widget-pxl_image_carousel .swiper-slide,
  .elementor-widget-pxl_image_carousel .pxl-swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-right: 0 !important;
  }
  .twentytwenty-handle {
    height: 50px;
    width: 50px;
    background-color: var(--link-color);
    position: absolute;
    left: 50%;
    top: 50%;
    border: none;
    margin-left: -25px;
    margin-top: -25px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   18. Page 404 — version Ivory bilingue
   --------------------------------------------------------------------------
   Markup défini dans nordic-child/404.php. Texte basculé FR/EN par Polylang.
   Style éditorial : monogramme, gros 404 Latienne Swash, message Latienne
   Becker, deux CTA Figtree CAPS (primary + secondary).
   ========================================================================== */

.ivory-404 {
  background-color: var(--ivory-ivoire, #f4eee2);
  color: var(--ivory-chocolat, #3c241b);
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
}

.ivory-404__inner {
  width: 100%;
  max-width: 640px;
  text-align: center;
}

.ivory-404__monogram {
  display: block;
  margin: 0 auto 32px;
  width: 64px;
  height: 64px;
  opacity: 0.95;
}

.ivory-404__code {
  font-family: var(--ivory-font-display, "Latienne Swash T", Georgia, serif);
  color: var(--ivory-bordeaux, #520f1a);
  font-weight: 700;
  font-size: clamp(96px, 18vw, 180px);
  line-height: 1;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}

.ivory-404__title {
  font-family: var(--ivory-font-display, "Latienne Swash T", Georgia, serif);
  color: var(--ivory-bordeaux, #520f1a);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}

.ivory-404__subtitle {
  font-family: var(--ivory-font-body, "Latienne Becker", Georgia, serif);
  color: var(--ivory-chocolat, #3c241b);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.7;
  margin: 0 auto 40px;
  max-width: 480px;
}

.ivory-404__cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px;
}

.ivory-404__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  font-family: var(--ivory-font-sans, "Figtree", system-ui, sans-serif);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ivory-bordeaux, #520f1a);
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  border-radius: 0;
}

.ivory-404__cta.is-primary {
  background-color: var(--ivory-bordeaux, #520f1a);
  color: var(--ivory-ivoire, #f4eee2);
}
.ivory-404__cta.is-primary:hover,
.ivory-404__cta.is-primary:focus {
  background-color: transparent;
  color: var(--ivory-bordeaux, #520f1a);
}

.ivory-404__cta.is-secondary {
  background-color: transparent;
  color: var(--ivory-bordeaux, #520f1a);
}
.ivory-404__cta.is-secondary:hover,
.ivory-404__cta.is-secondary:focus {
  background-color: var(--ivory-bordeaux, #520f1a);
  color: var(--ivory-ivoire, #f4eee2);
}

@media (max-width: 600px) {
  .ivory-404 {
    padding: 60px 16px;
    min-height: 60vh;
  }
  .ivory-404__cta-row {
    flex-direction: column;
    align-items: stretch;
  }
  .ivory-404__cta {
    width: 100%;
  }
}

/* ==========================================================================
   19. Single portfolio (fiches projet) — full-bleed mobile
   --------------------------------------------------------------------------
   Sur mobile, le template parent Nordic (single-portfolio.php) enveloppe
   le contenu dans un Bootstrap .container avec 15px de padding latéral et
   une max-width. Résultat : les images hero / sliders qu'on veut « bord à
   bord » sont rognées des 2 côtés.
   Sur < 768px, on retire le padding/max-width du container ET on neutralise
   le padding interne du wrapper Elementor : les sections Elementor gardent
   leurs propres paddings configurables, donc le texte reste lisible et les
   images peuvent vraiment occuper 100% de la largeur du viewport.
   ========================================================================== */

@media (max-width: 767px) {
  /* Casse du padding Bootstrap par défaut, on remet 5px latéraux uniformes
     pour que ni les textes ni les images ne soient collés aux bords. */
  body.single-portfolio,
  body.single-portfolio #pxl-page-wrapper,
  body.single-portfolio #pxl-main {
    overflow-x: hidden !important;
  }

  /* Wrapper Bootstrap : 5px de respiration latérale (hérite à tout le contenu) */
  body.single-portfolio > .container,
  body.single-portfolio .container {
    padding-left: 5px !important;
    padding-right: 5px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100vw !important;
    width: 100vw !important;
  }

  body.single-portfolio .container > .row,
  body.single-portfolio .row,
  body.single-portfolio #pxl-content-area,
  body.single-portfolio #pxl-content-main,
  body.single-portfolio article.pxl---post,
  body.single-portfolio article.post {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Containers Elementor : pas de padding/margin additionnel, ils héritent
     des 5px du wrapper Bootstrap (largeur disponible = 100vw - 10px). */
  body.single-portfolio .elementor-section.elementor-top-section,
  body.single-portfolio
    .elementor-section.elementor-top-section
    > .elementor-container,
  body.single-portfolio .elementor-container,
  body.single-portfolio > .container .e-con,
  body.single-portfolio .e-con,
  body.single-portfolio .e-con-inner,
  body.single-portfolio .elementor-column,
  body.single-portfolio .elementor-widget-wrap {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
  }

  /* Images & sliders : 100% du parent = 100vw - 10px (les 5px du wrapper) */
  body.single-portfolio .container .elementor-widget-image,
  body.single-portfolio .container .elementor-widget-pxl_image,
  body.single-portfolio .container .elementor-widget-pxl_image_carousel,
  body.single-portfolio .container .elementor-widget-image-carousel,
  body.single-portfolio .container .elementor-widget-pxl_image_box,
  body.single-portfolio .pxl-image-carousel,
  body.single-portfolio .swiper-container,
  body.single-portfolio .swiper-wrapper,
  body.single-portfolio .swiper-slide {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.single-portfolio .container .elementor-widget-image img,
  body.single-portfolio .container .elementor-widget-pxl_image img,
  body.single-portfolio .pxl-image-carousel img,
  body.single-portfolio .swiper-slide img,
  body.single-portfolio .pxl-swiper-slide img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
    object-fit: cover;
  }

  /* Galerie d'images (widget gallery natif) : pleine largeur du parent */
  body.single-portfolio .container .elementor-widget-gallery,
  body.single-portfolio .container .elementor-widget-gallery .elementor-grid,
  body.single-portfolio
    .container
    .elementor-widget-gallery
    .elementor-gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.single-portfolio header {
    margin: 0px 5px;
  }
}

/* ==========================================================================
   20. Page Réalisations — aspect-ratio uniforme sur les vignettes
   --------------------------------------------------------------------------
   Décision client (2026-06-30) : harmoniser visuellement les tuiles de la
   grille portfolio. Sans ça, la photo « Le Plongeoir » (très portrait) crée
   une tuile 2× plus haute que les autres et casse la cadence.
   On force un ratio 3/4 (portrait modéré) avec object-fit: cover : toutes
   les tuiles ont la même hauteur, les images sont recadrées par leur centre.
   Ciblage strict : widget pxl_post_grid en layout portfolio-1 / portfolio-2,
   sans toucher au Journal (qui a son propre traitement dans ivory-blog.css).
   ========================================================================== */

.pxl-portfolio-grid1 .pxl-item--image,
.pxl-portfolio-grid2 .pxl-item--image,
.pxl-portfolio-grid-1 .pxl-item--image,
.pxl-portfolio-grid-2 .pxl-item--image,
.pxl---post.pxl-item--portfolio .pxl-item--image,
.pxl-item--portfolio .pxl-item--image,
.elementor-widget-pxl_post_grid .pxl-item--image,
.elementor-widget-pxl_post_grid .pxl-link-image {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  width: 100%;
  display: block;
  background-color: rgba(82, 15, 26, 0.04);
}

.pxl-portfolio-grid1 .pxl-item--image img,
.pxl-portfolio-grid2 .pxl-item--image img,
.pxl-portfolio-grid-1 .pxl-item--image img,
.pxl-portfolio-grid-2 .pxl-item--image img,
.pxl---post.pxl-item--portfolio .pxl-item--image img,
.pxl-item--portfolio .pxl-item--image img,
.elementor-widget-pxl_post_grid .pxl-item--image img,
.elementor-widget-pxl_post_grid .pxl-link-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

/* Fallback pour les navigateurs sans aspect-ratio (rare en 2026, zero risque). */
@supports not (aspect-ratio: 3/4) {
  .pxl-portfolio-grid1 .pxl-item--image,
  .pxl-portfolio-grid2 .pxl-item--image,
  .pxl---post.pxl-item--portfolio .pxl-item--image,
  .pxl-item--portfolio .pxl-item--image,
  .elementor-widget-pxl_post_grid .pxl-item--image {
    aspect-ratio: auto;
    padding-top: 133.333%;
    height: 0;
  }
  .pxl-portfolio-grid1 .pxl-item--image img,
  .pxl-portfolio-grid2 .pxl-item--image img,
  .pxl---post.pxl-item--portfolio .pxl-item--image img,
  .pxl-item--portfolio .pxl-item--image img,
  .elementor-widget-pxl_post_grid .pxl-item--image img {
    position: absolute;
    inset: 0;
  }
}