/*
 Theme Name:   Cauris
 Theme URI:    https://webxify.com/cauris
 Author:       Webxify
 Author URI:   https://webxify.com
 Description:  Cabinet de conseil senior en Afrique de l'Ouest et Centrale — Strategie, mandats executifs et operations.
 Version:      1.0.0
 Requires at least: 6.4
 Requires PHP: 8.0
 License:      proprietary
 Text Domain:  cauris
*/

/* ===============================================================
 * 1. Design tokens
 * =============================================================== */

:root {
  /* Palette */
  --cauris-bg:          #F8F4EC;
  --cauris-surface:     #FFFFFF;
  --cauris-ink:         #1B1B1B;
  --cauris-ink-soft:    #4A4A4A;
  /* Était #7A7A7A : 3,91:1 sur le crème et 4,29:1 sur le blanc, sous le seuil
     AA de 4,5:1 exigé par la recette AC-10. #6E6E6E monte à 4,65:1 sur le crème
     et 5,10:1 sur le blanc. Le jeton ne sert que sur fonds clairs (sous-titre
     de marque, attribution MapLibre, secteur des popups, page 404), donc
     l'assombrir n'expose aucun texte posé sur le bronze. */
  --cauris-ink-faint:   #6E6E6E;
  --cauris-line:        rgba(27, 27, 27, .08);

  /* Gold */
  --cauris-gold-1:      #BF953F;
  --cauris-gold-2:      #FCF6BA;
  --cauris-gold-3:      #B38728;
  /* Était #8E6C28 : 4,43:1 sur le crème, juste sous les 4,5:1. Le dossier §03
     demande explicitement d'assombrir les petits libellés dorés modifiés. Le
     décalage est de 4 points par canal, invisible à l'œil, et porte le doré
     texte à 4,68:1 sur le crème et 5,14:1 sur le blanc. #BF953F, lui, reste
     strictement décoratif : jamais de texte. */
  --cauris-gold-dark:   #8A6825;
  --cauris-grad-gold:   linear-gradient(to right, #BF953F, #FCF6BA, #B38728);

  /* Bleu profond — titres de section sur fond clair uniquement.
     Relevés WCAG sur le beige #F8F4EC (dossier de passation v1.0, §03) :
       témoin #1B1B1B ........ 15,70:1
       variante A #16324F .... 11,94:1  ← recommandée
       variante B #0E2A47 .... 13,29:1  ← alternative, à comparer en recette
     Ne jamais poser ce bleu sur le bronze #3d2c14 : #16324F n'y atteint
     que 1,02:1, alors que le blanc y tient 13,39:1. */
  --cauris-blue-a:      #16324F;
  --cauris-blue-b:      #0E2A47;
  --cauris-heading-deep: var(--cauris-blue-a);

  /* Bronze (footer) */
  --cauris-bronze:      #3d2c14;
  --cauris-bronze-soft: rgba(255, 255, 255, .75);
  --cauris-bronze-mute: rgba(255, 255, 255, .55);
  --cauris-bronze-line: rgba(255, 255, 255, .12);

  /* Fonts */
  --cauris-font-sans:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --cauris-font-serif:    "Fraunces", Georgia, "Times New Roman", serif;
  --cauris-font-spectral: "Spectral", Georgia, "Times New Roman", serif;

  /* Eyebrow (kicker uppercase) — référence partagée pour tous les blocs.
     Avant l'audit : .72 / .75 / .78 / .8rem et .18 / .22em mélangés ⇒ unifié. */
  --cauris-eyebrow-fs:       .75rem;
  --cauris-eyebrow-tracking: .2em;
  --cauris-eyebrow-weight:   600;

  /* Line-heights — registres distincts */
  --cauris-leading-tight: 1.15;   /* titres display & serif */
  --cauris-leading-snug:  1.3;    /* sous-titres, lead court */
  --cauris-leading-base:  1.55;   /* corps */
  --cauris-leading-relaxed: 1.7;  /* long-form (single-post) */

  /* Weights */
  --cauris-weight-regular: 400;
  --cauris-weight-medium:  500;
  --cauris-weight-semibold: 600;
  --cauris-weight-bold:    700;

  /* Motion */
  --cauris-ease:        cubic-bezier(.22, .61, .36, 1);
  --cauris-dur-fast:    .18s;
  --cauris-dur-base:    .25s;

  /* Layout */
  --cauris-header-h:    92px;
  --cauris-radius-sm:   4px;
  --cauris-radius-md:   10px;
  --cauris-radius-lg:   16px;

  /* Shadows */
  --cauris-shadow-sm:   0 2px 8px rgba(27, 27, 27, .06);
  --cauris-shadow-md:   0 10px 30px rgba(27, 27, 27, .08);
  --cauris-shadow-lg:   0 22px 60px rgba(27, 27, 27, .12);

  /* Buttons — échelle 3 tailles (sm/md/lg). Référence pour tout nouveau CTA.
     sm  = nav, inline pill (header, footer newsletter, 404 search)
     md  = conversion section (hero, talk-to-partner, news-recent, process, 404 primary)
     lg  = engagement final (form submit page contact) */
  --cauris-btn-sm-pad-y:  .6rem;
  --cauris-btn-sm-pad-x:  1.3rem;
  --cauris-btn-sm-fs:     .86rem;

  --cauris-btn-md-pad-y:  .95rem;
  --cauris-btn-md-pad-x:  1.9rem;
  --cauris-btn-md-fs:     .92rem;

  --cauris-btn-lg-pad-y:  1.1rem;
  --cauris-btn-lg-pad-x:  2rem;
  --cauris-btn-lg-fs:     .95rem;

  --cauris-btn-weight:    600;
  --cauris-btn-radius:    999px;
}

/* ===============================================================
 * 2. Body base
 * =============================================================== */

body {
  margin: 0;
  font-family: var(--cauris-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--cauris-ink);
  /* background: var(--cauris-bg); */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Absorbe le translate3d(100px) qu'AOS pose sur fade-left/fade-right avant
   l'entrée dans le viewport. Sur .site-content et non body, qui propagerait
   l'overflow au viewport ; clip et non hidden, pour ne pas casser les sticky. */
.site-content {
  overflow-x: clip;
}

a {
  color: var(--cauris-ink);
  transition: color var(--cauris-dur-base) var(--cauris-ease);
}
a:hover,
a:focus-visible { color: var(--cauris-gold-dark); }

::selection {
  background: rgba(191, 149, 63, .25);
  color: var(--cauris-ink);
}

/* Skip link visible on focus */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--cauris-ink);
  color: #FFF;
  padding: .5rem 1rem;
  border-radius: var(--cauris-radius-sm);
  z-index: 9999;
}
.skip-link:focus {
  left: 8px;
  color: #FFF;
}

/* ---------------------------------------------------------------
 * Content hygiene — neutralise les blocs Gutenberg fantômes.
 * Quand un éditeur laisse un bloc paragraphe vide dans le contenu
 * (Enter en trop avant d'enregistrer), `the_content()` rend un
 * `<p class="wp-block-paragraph"></p>` qui injecte ~16px de marge
 * entre le dernier vrai bloc et le footer. On masque ces vides.
 * --------------------------------------------------------------- */
.site-content p:empty,
.site-main p:empty {
  display: none;
}

/* ---------------------------------------------------------------
 * Titre de section en bleu profond — fonds clairs uniquement
 *
 * Pose une custom property plutôt qu'un `color` : les CSS de bloc sont
 * enqueués après style.css et gagneraient la cascade à spécificité égale.
 * `cauris-heading-variant-b` sur <body> bascule sur la variante B.
 * --------------------------------------------------------------- */
.cauris-heading--deep {
  --cauris-heading-color: var(--cauris-heading-deep);
}

body.cauris-heading-variant-b {
  --cauris-heading-deep: var(--cauris-blue-b);
}

/* Retour au témoin encre, pour la comparaison à trois. */
body.cauris-heading-variant-temoin {
  --cauris-heading-deep: var(--cauris-ink);
}

/* Garde-fou : sur le fond bronze du bloc Méthode, le bleu tombe à
   1,02:1. Si la classe y atterrit par erreur, on retombe sur blanc
   plutôt que de livrer un titre illisible. */
.process-block .cauris-heading--deep {
  --cauris-heading-color: #FFF;
}

/* ===============================================================
 * 3. Site header (navbar)
 * =============================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--cauris-bg, #F8F4EC);
  border-bottom: 1px solid var(--cauris-line);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: var(--cauris-header-h);
}

.site-header__brand {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  text-decoration: none;
  color: var(--cauris-ink);
}
/* La boîte reste carrée pour réserver la place dans le lockup et éviter tout
   saut de mise en page au chargement, mais le fichier n'est pas forcément
   carré : logo.png fait 59×80. Sans object-fit le navigateur l'écrase à 48×48
   et le logo sort déformé de 26 % (recette AC-11, « aucun logo étiré »). */
.site-header__brand-shell { display: block; width: 3rem; height: 3rem; object-fit: contain; }
.site-header__brand-logo  { display: block; height: 36px; width: auto; }
.site-header__brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.site-header__brand-name {
  font-family: var(--cauris-font-serif);
  font-size: 1.45rem;
  font-weight: 700;
}
.site-header__brand-sub {
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cauris-ink-faint);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.primary-nav a {
  position: relative;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  padding: .4rem 0;
}
.primary-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--cauris-gold-dark);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--cauris-dur-base) var(--cauris-ease);
}
.primary-nav a:hover::after,
.primary-nav a:focus-visible::after,
.primary-nav .current-menu-item > a::after { transform: scaleX(1); }

.site-header__tools {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
}

.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: 0.7rem 1.25rem;
  background: var(--cauris-grad-gold);
  color: var(--cauris-ink);
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  border-radius: 999px;
}
.site-header__cta:hover,
.site-header__cta:focus-visible {
  color: var(--cauris-ink);
}
.site-header__cta:focus-visible {
  outline: 2px solid var(--cauris-ink);
  outline-offset: 3px;
}


/* CTA dupliqué dans la nav : invisible par défaut (visible uniquement
   dans le menu burger mobile, voir bloc @media ≤767.98px). Placée AVANT
   les @media pour que la règle mobile (même spécificité) gagne par
   source order. */
.primary-nav .site-header__cta { display: none; }

.site-header__burger {
  display: none;
  background: none;
  border: 0;
  /* 44px et non 38 : c'est le contrôle le plus sollicité au doigt et le dossier
     fixe des zones tactiles d'environ 44 x 44 px. L'en-tête a un min-height de
     92px et le bouton y est centré, donc l'agrandissement ne déplace rien ; les
     trois barres restent larges de 22px, l'aspect visuel est identique.
     Recette AC-12. */
  width: 44px;
  height: 44px;
  padding: 0;
  cursor: pointer;
  color: var(--cauris-ink);
}
.site-header__burger:focus-visible {
  outline: 2px solid var(--cauris-gold-dark, #8E6C28);
  outline-offset: 2px;
  border-radius: 4px;
}
.site-header__burger span,
.site-header__burger span::before,
.site-header__burger span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: currentColor;
  position: relative;
  margin-inline: auto;
  transition: transform var(--cauris-dur-base) var(--cauris-ease),
              top var(--cauris-dur-base) var(--cauris-ease),
              opacity var(--cauris-dur-base) var(--cauris-ease);
}
.site-header__burger span::before,
.site-header__burger span::after { content: ""; position: absolute; left: 0; }
.site-header__burger span::before { top: -6px; }
.site-header__burger span::after  { top:  6px; }
.site-header__burger[aria-expanded="true"] span                { background: transparent; }
.site-header__burger[aria-expanded="true"] span::before         { top: 0; transform: rotate(45deg); }
.site-header__burger[aria-expanded="true"] span::after          { top: 0; transform: rotate(-45deg); }

/* ===============================================================
 * 4. Site footer
 * =============================================================== */

.site-footer {
  background: var(--cauris-bronze);
  color: var(--cauris-bronze-soft);
  padding-top: 4.5rem;
  font-size: .92rem;
  line-height: 1.6;
}

.site-footer__grid {
  display: grid;
  /* minmax(0, …) et pas 1fr sec : une piste fr garde un minimum automatique égal
     au min-content de son contenu. Le champ e-mail de la newsletter a un
     min-content irréductible (~243px, la largeur du size=20 par défaut) que
     min-width:0 ne supprime pas côté sizing intrinsèque ; la piste gonflait donc
     à 360px et le footer débordait sous 992px (recette AC-11). */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 3rem;
  padding-bottom: 3rem;
}

/* --- Column 1 : brand + description + address + socials --- */
.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.site-footer__lockup {
  display: flex;
  align-items: center;
  gap: .85rem;
}
/* Le lockup du footer porte désormais logo.png et non plus le cauris SVG
   monochrome (assets/img/logo-cauris.svg, supprimé) : le filtre de teinte qui
   servait à le passer en crème sur le bronze est retiré, il délavait le PNG
   couleur. object-fit: contain, comme .site-header__brand-shell, pour que la
   boîte peinte corresponde aux attributs width/height du markup — sans lui
   l'image tombait à 36 × 49 px alors que le HTML en réservait 36 × 36, d'où
   un décalage de 13 px au chargement (recette AC-11). */
.site-footer__shell {
  display: block;
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.site-footer__name {
  margin: 0;
  font-family: var(--cauris-font-sans);
  line-height: 1.15;
}
.site-footer__name strong {
  display: block;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cauris-gold-2);
}
.site-footer__name span {
  display: block;
  margin-top: .2rem;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cauris-bronze-mute);
}
.site-footer__desc {
  margin: 0;
  color: var(--cauris-bronze-soft);
  max-width: 20rem;
}
.site-footer__address {
  font-style: normal;
  margin: 0;
  color: var(--cauris-bronze-soft);
}

/* Socials — single row of round chips under the address */
.site-footer__social-list {
  display: flex;
  gap: .55rem;
  list-style: none;
  margin: .25rem 0 0;
  padding: 0;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--cauris-bronze-line);
  background: transparent;
  color: #FFF;
  transition: background var(--cauris-dur-base) var(--cauris-ease),
              color      var(--cauris-dur-base) var(--cauris-ease),
              border     var(--cauris-dur-base) var(--cauris-ease),
              transform  var(--cauris-dur-base) var(--cauris-ease);
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background: var(--cauris-grad-gold);
  color: var(--cauris-ink);
  border-color: transparent;
  transform: translateY(-2px);
}
.site-footer__social-link svg { width: 16px; height: 16px; display: block; }

/* --- Heading shared by all columns --- */
.site-footer__heading {
  margin: 0 0 1.25rem;
  font-family: var(--cauris-font-sans);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--cauris-gold-1);
}

/* --- Column 2 : nav --- */
.site-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Zone tactile portée à ~44px de haut : inline-block + padding vertical,
   marge du li reprise à zéro pour garder le rythme de la liste. */
.site-footer__menu li { margin-bottom: 0; }
.site-footer__menu a {
  display: inline-block;
  padding: .85rem 0;
  color: var(--cauris-bronze-soft);
  text-decoration: none;
  transition: color var(--cauris-dur-base) var(--cauris-ease);
}
.site-footer__menu a:hover,
.site-footer__menu a:focus-visible { color: var(--cauris-gold-2); }

/* --- Column 3 : contact (E./T.) + newsletter --- */
.site-footer__contact-col {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.site-footer__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.site-footer__contact-list li {
  display: flex;
  align-items: baseline;
  gap: .5rem;
}
.site-footer__contact-key {
  font-weight: 700;
  color: var(--cauris-gold-1);
  letter-spacing: .04em;
}
.site-footer__contact-val {
  color: var(--cauris-bronze-soft);
  text-decoration: none;
  transition: color var(--cauris-dur-base) var(--cauris-ease);
}
.site-footer__contact-val:hover,
.site-footer__contact-val:focus-visible { color: var(--cauris-gold-2); }

/* Newsletter — pill input + gold button */
.site-footer__newsletter-form {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, .15);
  border: 1px solid var(--cauris-bronze-line);
  border-radius: 999px;
  padding: 4px;
  max-width: 420px;
  transition: border-color var(--cauris-dur-base) var(--cauris-ease);
}

.site-footer__newsletter-form:focus-within {
  border-color: var(--cauris-gold-1);
}
.site-footer__newsletter-input {
  flex: 1;
  /* Un input est un flex item à min-width:auto : il refuse de descendre sous sa
     largeur intrinsèque (~243px). Avec le bouton, la pill imposait 377px de
     min-content à la colonne Contact, donc à la piste 1fr de .site-footer__grid,
     et le footer débordait de 40px à 320px (recette AC-11). */
  min-width: 0;
  background: transparent;
  border: 0;
  outline: 0;
  padding: .6rem 1rem;
  color: #FFF;
  font: inherit;
}
.site-footer__newsletter-input::placeholder {
  color: var(--cauris-bronze-mute);
}
.site-footer__newsletter-btn {
  border: 0;
  cursor: pointer;
  background: var(--cauris-grad-gold);
  color: var(--cauris-ink);
  font-family: var(--cauris-font-sans);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .65rem 1.35rem;
  border-radius: 999px;
  transition: transform var(--cauris-dur-base) var(--cauris-ease),
              filter    var(--cauris-dur-base) var(--cauris-ease);
}
.site-footer__newsletter-btn:hover,
.site-footer__newsletter-btn:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
}

/* --- Bottom bar --- */
.site-footer__bottom {
  border-top: 1px solid var(--cauris-bronze-line);
  padding: 1.25rem 0;
  font-size: .82rem;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.site-footer__bottom-legal {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.site-footer__copyright { margin: 0; color: var(--cauris-bronze-mute); }
.site-footer__ids {
  margin: 0;
  color: var(--cauris-bronze-mute);
  opacity: .78;
  font-size: .78rem;
  letter-spacing: .01em;
}
.site-footer__ids abbr {
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}
.site-footer__id-sep { margin: 0 .4rem; }
.site-footer__legal {
  list-style: none;
  display: flex;
  gap: 1.5rem;
  margin: 0;
  padding: 0;
}
.site-footer__legal a {
  color: var(--cauris-bronze-mute);
  text-decoration: none;
  transition: color var(--cauris-dur-base) var(--cauris-ease);
}
.site-footer__legal a:hover,
.site-footer__legal a:focus-visible { color: var(--cauris-gold-2); }

/* ===============================================================
 * 5. Responsive — header/footer
 * =============================================================== */

@media (max-width: 991.98px) {
  .site-footer__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  /* Tablet : le sous-titre "Executive & Services" wrappait sur 2 lignes.
     On le masque pour préserver le lockup horizontal compact. */
  .site-header__brand-sub { display: none; }
  /* Compacter le CTA pour qu'il rentre sans wrap dans l'espace tablet. */
  .site-header__cta { padding: 0.7rem 1rem; font-size: .8rem; }
}

@media (max-width: 767.98px) {
  .site-header__burger { display: inline-flex; align-items: center; justify-content: center; }
  .primary-nav {
    position: absolute;
    top: var(--cauris-header-h);
    left: 0;
    right: 0;
    background: var(--cauris-bg);
    border-bottom: 1px solid var(--cauris-line);
    padding: 1rem 1.25rem 1.25rem;
    transform: translateY(-110%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--cauris-dur-base) var(--cauris-ease),
                opacity var(--cauris-dur-base) var(--cauris-ease),
                visibility 0s linear var(--cauris-dur-base);
  }
  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
  .primary-nav ul { flex-direction: column; align-items: flex-start; gap: .3rem; }
  /* Zone tactile du menu burger : avec le padding de bureau (.4rem) les entrées
     ne faisaient que 30px de haut, sous les 44px demandés par le dossier. Le
     display:block est indispensable : sur un <a> resté inline, le padding
     vertical déborde de la ligne sans pousser le <li>, et les cibles finiraient
     par se chevaucher. Le gap est réduit d'autant pour conserver le rythme
     (pitch de 46px avant, 48px après). Le décalage du soulignement compense le
     padding, l'aspect visuel est inchangé. Recette AC-12. */
  .primary-nav ul a { display: block; padding: .8rem 0; }
  .primary-nav ul a::after { bottom: .4rem; }
  /* Mobile : le CTA dans .__tools est masqué (place dispo trop courte
     entre burger et brand) ; un CTA dupliqué est rendu dans la nav et
     révélé ci-dessous quand le menu est ouvert (voir header.php). */
  .site-header__tools .site-header__cta { display: none; }
  /* CTA dans le menu burger : full width, ancré en bas de la nav ouverte. */
  .primary-nav .site-header__cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 1rem;
    padding: 0.7rem 1.25rem;
    font-size: .9rem;
    width: 100%;
  }
  .site-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .site-footer__bottom-inner { flex-direction: column; align-items: flex-start; }
}