/*
 * site.css — surcharges globales nav + footer (issues du prototype home.css)
 * Chargé sur TOUTES les pages pour que le header/footer Theme Builder soient
 * rendus à l'identique de la home. Complète shared.css.
 */
:root {
  --ink: oklch(18% 0.025 250);
  --ink-soft: oklch(40% 0.02 250);
  --ink-mute: oklch(58% 0.015 250);
  --rule: oklch(90% 0.008 85);
  --green-v2: oklch(48% 0.13 152);
  --green-soft: oklch(90% 0.05 152);
  --terra: oklch(62% 0.14 40);
  --cream: #ffffff;
  --cream-2: oklch(97% 0.008 85);
}

/* Le reset de Hello est confiné dans un @layer (voir shared.css) : il perd donc
   tout CONFLIT avec le CSS du site. Mais un layer ne tranche que les conflits —
   les propriétés que personne d'autre ne déclare s'appliquent quand même. Le
   reset habille tout <a> et tout <button> en rose #c36 (texte, bordure, et fond
   au :hover/:focus) : dès qu'une maquette ne déclare pas ces propriétés — cas
   courant, p.ex. .sc-opt qui pose son fond mais jamais sa couleur — le rose
   ressort, et le `color:#fff` du :hover efface le libellé sur fond clair.
   On les déclare donc ici, hors layer, avec une spécificité volontairement
   minimale (0,0,1) : hors layer, ces déclarations battent TOUT le reset, y
   compris ses :hover/:focus, sans qu'aucune règle de survol soit nécessaire ;
   et la moindre règle de maquette (.btn-ink, .btn-primary…) les reprend à son
   compte. Ne pas ajouter de variante :hover ici : elle écraserait la couleur
   de base des boutons dont le survol ne redéclare que le fond. */
a { color: inherit; }
button,
[type="button"],
[type="submit"],
[type="reset"] {
  color: inherit;
  background-color: transparent;
  border-color: currentColor;
  white-space: normal;
}

/* Boutons éditoriaux utilisés par la nav (globaux, hors home.css) */
.btn-ink {
  background: var(--ink); color: var(--cream);
  padding: 14px 24px; border-radius: 100px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: transform .2s, background .2s;
}
.btn-ink:hover { background: oklch(28% 0.04 250); color: var(--cream); transform: translateY(-1px); }
.btn-ink, .btn-ink:hover, .btn-ink:focus { color: var(--cream); }
.btn-ink .arrow { font-family: 'Newsreader', serif; font-style: italic; font-size: 18px; }
.btn-ghost {
  background: transparent; color: var(--ink);
  padding: 13px 22px; border-radius: 100px; border: 1.5px solid var(--ink);
  font-size: 14px; font-weight: 600; text-decoration: none;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .2s, color .2s;
}
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* NAV — look éditorial */
.site-nav { background: rgba(255,255,255,0.85) !important; border-bottom: 1px solid var(--rule) !important; }
/* Largeur du header élargie pour occuper le container (défaut prototype : 1200px). */
.site-nav .nav-inner { max-width: 1400px; }
.nav-logo { color: var(--ink) !important; font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; letter-spacing: -0.8px; }
.nav-logo span { color: var(--green-v2) !important; }
.nav-links a { color: var(--ink-soft) !important; }
.nav-links a:hover { color: var(--ink) !important; }

/* FOOTER */
/* Footer bleu nuit #05294F (retour client 23/07 — les maquettes hésitaient
   entre ink et navy ; le client tranche pour #05294F partout). */
.site-footer { background: #05294F !important; }
.site-footer .footer-bottom { gap: 8px 20px; flex-wrap: wrap; }

/* Fix collision de classe avec Hello Elementor : theme.css applique, en ≥1200px,
   « max-width: 1140px » à une liste de sélecteurs dont .site-footer:not(.dynamic-footer)
   ET .site-footer .footer-inner — ce qui boxait le fond du footer et réduisait son
   contenu à 1140. On rétablit la pleine largeur du fond, et on cale le contenu sur
   la même géométrie que .nav-inner (max-width 1400 + padding 24, box-sizing:border-box)
   pour que les bords du header et du footer tombent au pixel près.
   Spécificité alignée (0,2,0) + chargé après theme.css → gagne. */
.site-footer:not(.dynamic-footer) { max-width: 100%; width: 100%; padding-left: 0; padding-right: 0; }
.site-footer .footer-inner { max-width: 1400px; padding: 0 24px; }

/* La nav est position:fixed. Sur les pages non-home, on décale le contenu
   sous la nav (68px). La home gère son propre offset via le hero. */
body:not(.home) { padding-top: 68px; }

/* Barre d'admin WordPress : la nav étant position:fixed, elle passe sous la
   barre d'admin (elle aussi fixed) et se fait « grignoter ». On décale la nav
   — et le contenu des pages non-home — de la hauteur de la barre. Ciblé sur
   body.admin-bar : n'affecte QUE les utilisateurs connectés (admins). */
.admin-bar .site-nav { top: 32px; }
body.admin-bar:not(.home) { padding-top: 100px; } /* 32 (barre) + 68 (nav) */
@media screen and (max-width: 782px) {
  .admin-bar .site-nav { top: 46px; }              /* barre d'admin = 46px sur mobile */
  body.admin-bar:not(.home) { padding-top: 114px; } /* 46 + 68 */
}

/* Hello theme.css souligne tous les liens des pages non-Elementor
   (`.page-content a { text-decoration: underline }`, 0,1,1). La maquette
   n'a aucun soulignement par défaut. Même spécificité, chargé après → gagne. */
.page-content a { text-decoration: none; }

/* ══════ PONT WIDGETS NATIFS ↔ DESIGN SYSTEM (reconstruction Elementor) ══════
   Les classes du design system (hero-ref-h1, hero-ref-intro…) sont posées dans
   « Classes CSS » du widget, donc sur le WRAPPER. Ce pont fait hériter l'élément
   interne (h1/h2/p) de la typo du wrapper, au lieu des styles h1 du reset Hello.
   margin:0 : les marges de la maquette vivent sur les classes (donc le wrapper). */
/* OPT-IN via la classe utilitaire « pep-t » sur le widget : à utiliser quand la
   TYPO vit sur la classe design-system posée sur le wrapper (ex. hero-ref-h1).
   Ne PAS l'utiliser quand la maquette style le h2 par sélecteur contextuel
   (ex. .v2-index-head h2) — le h2 natif est alors déjà bien ciblé. */
[data-elementor-type] .elementor-widget-heading.pep-t .elementor-heading-title {
  font: inherit; color: inherit; letter-spacing: inherit; text-align: inherit;
  text-wrap: inherit; margin: 0;
}
/* NB : pas de reset des <p> internes ici — le `* { margin: 0 }` de shared.css
   (hors layer) s'en charge déjà. En revanche Elementor v4 force
   `.elementor .elementor-widget-text-editor p:last-child { margin-bottom: 0 }`
   (0,3,1) qui bat les marges contextuelles de la maquette (.v2-final p, etc.).
   → utilitaires pep-mbNN à poser sur le widget quand la maquette donne une
   marge basse au <p> par sélecteur contextuel. */
[data-elementor-type] .elementor-widget-text-editor.pep-mb28 p:last-child { margin-bottom: 28px; }
[data-elementor-type] .elementor-widget-text-editor.pep-mb32 p:last-child { margin-bottom: 32px; }
[data-elementor-type] .elementor-widget-text-editor.pep-mb40 p:last-child { margin-bottom: 40px; }

/* Les widgets custom PEP occupent toute la largeur de leur colonne. */
[data-elementor-type] [class*="elementor-widget-pep-"] { width: 100%; }

/* Éléments composites : la classe design-system posée sur le widget est un
   flex/inline-flex dont les items doivent être les spans/liens du contenu.
   display:contents efface le conteneur interne (heading-title ou <p>). */
.hero-ref-pill .elementor-heading-title,
.hero-ref-cta-row p { display: contents; }

/* pep-contents : efface wrapper + <p> du widget — le contenu (liens, spans)
   devient l'item direct du container parent (flex/grid de la maquette). */
.elementor-widget.pep-contents,
.pep-contents > .elementor-widget-container,
.pep-contents p { display: contents; }

/* pep-unwrap : garde le wrapper (qui porte la classe DS) mais efface le <p>
   du text-editor — les spans/strong deviennent les enfants directs. */
.pep-unwrap p { display: contents; }

/* Les containers Elementor (.e-con) forcent max-width via variables et règles
   générées à forte spécificité : on réaffirme les largeurs des sections du
   design system posées sur des containers, classe par classe (!important
   assumé — ces largeurs sont la vérité maquette, rien ne doit les battre). */
.e-con.hs { max-width: 1560px !important; }
.e-con.v2-index-inner { max-width: 1400px !important; }
.e-con.v2-kit { max-width: 1320px !important; }
.e-con.v2-livre { max-width: 1400px !important; }
.e-con.v2-quote-inner { max-width: 1100px !important; }
.e-con.v2-journal { max-width: 1320px !important; }
.e-con.v2-final-inner { max-width: 980px !important; }
.e-con.v2-source-inner { max-width: 1100px !important; }
[data-elementor-type] .v2-livre .elementor-widget.pep-h2 { margin: 18px 0 24px !important; }
[data-elementor-type] .v2-livre .elementor-widget.pep-p { max-width: 500px; margin-bottom: 28px !important; }

/* Largeurs maquette sur les WIDGETS (frontend.css force max-width:100% après
   nos feuilles) — même principe que ci-dessus, par classe. */
[data-elementor-type] .elementor-widget.hero-ref-intro { max-width: 460px !important; }

/* Elementor met les marges des widgets à zéro dans les containers flex : on
   réaffirme les marges maquette des blocs du héro (valeurs de home.css). */
[data-elementor-type] .elementor-widget.hero-ref-h1 { margin: 26px 0 0 !important; }
[data-elementor-type] .elementor-widget.hero-ref-intro { margin: 30px 0 0 !important; }
[data-elementor-type] .elementor-widget.hero-ref-cta-row { margin: 34px 0 0 !important; }
[data-elementor-type] .v2-index-head .elementor-widget.pep-h2 { margin-top: 18px !important; }
[data-elementor-type] .elementor-widget.v2-kit-box-title { margin-bottom: 4px !important; }
[data-elementor-type] .elementor-widget.v2-kit-box-sub { margin-bottom: 18px !important; }
[data-elementor-type] .elementor-widget.v2-quote-body { margin: 32px 0 40px !important; }
[data-elementor-type] .e-con.v2-quote-others { margin-top: 80px !important; }
[data-elementor-type] .elementor-widget.v2-call-headline { margin: 18px 0 28px !important; }
[data-elementor-type] .v2-call-card .elementor-widget.pep-h3 { margin-bottom: 6px !important; }
[data-elementor-type] .v2-call-card .elementor-widget.sub { margin-bottom: 24px !important; }
[data-elementor-type] .v2-journal-head .elementor-widget.pep-h2 { margin-top: 18px !important; }
[data-elementor-type] .v2-final .elementor-widget.pep-h2 { margin: 24px 0 32px !important; }
[data-elementor-type] .elementor-widget.v2-final-note { margin-top: 36px !important; }
[data-elementor-type] .e-con.v2-journal-foot { margin-top: 40px !important; }

/* Le widget Titre strippe les <svg> : le span.swoosh survit, on lui rend son
   tracé en background (même path que la maquette, couleur --green-v2 en dur
   car un data-URI ne lit pas les variables CSS). */
.hero-ref-h1 .serif-line .swoosh {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 12' preserveAspectRatio='none' fill='none'%3E%3Cpath d='M2 8 C 70 2, 150 1, 298 6' stroke='oklch(48%25 0.13 152)' stroke-width='3.5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* Pictos Favoris / Panier du menu mobile (retour client 23/07) : les deux
   entrées portent une icône SVG (mêmes pictos que la nav desktop, post 28). */
.mobile-menu .fav-trigger-mobile,
.mobile-menu .cart-link-mobile { display: flex; align-items: center; gap: 10px; }
.mobile-menu .fav-trigger-mobile svg,
.mobile-menu .cart-link-mobile svg { width: 18px; height: 18px; flex-shrink: 0; }
.mobile-menu .cart-link-mobile .pep-cart-count { margin-left: 0; } /* le gap suffit */