/* ================================================================
   KOOKIYA FLAVORS — global.css
   Palette marque mère permanente · Typographie · Primitives
   éditoriales · Header · Footer · Utilitaires accessibilité.
   Mobile-first. Aucune dépendance externe hors Google Fonts.
   ================================================================ */


/* ================================================================
   1. TOKENS — palette, typographie, mesures, timing
   ================================================================ */

:root{
  /* --- Palette cadre (toutes pages) --- */
  --encre:#1A2744;            /* fond sombre principal */
  --encre-sombre:#16213A;     /* variante Encre assombrie (emplacement Bloc 5) */
  --ivoire:#FBF3E3;           /* fond clair respiration */
  --turquoise:#1B7A78;        /* signature : eyebrows, liens, filets */
  --safran:#E8922A;           /* CTA principaux, accent « noble » */
  --safran-fonce:#D17E1D;     /* hover CTA */

  /* --- Palette territoriale · USAGE RESTREINT /univers uniquement.
     En accents ponctuels (filets, bordures, eyebrows de carte).
     Jamais en fond, jamais en aplat large. --- */
  --terracotta:#C96A3A;       /* territoire Afrique */
  --jade:#2D6B5E;             /* territoire Asie */
  --or-solaire:#D4A84B;       /* filets précieux (réserve) */

  /* --- Typographie --- */
  --font-titre:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-corps:'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-bijou:'Pinyon Script', 'Snell Roundhand', cursive;

  --tracking-eyebrow:0.3em;
  --tracking-cta:0.18em;
  --tracking-lien:0.14em;

  /* --- Timing & easing --- */
  --ease:cubic-bezier(0.4, 0, 0.2, 1);

  /* --- Mesures --- */
  --gutter:clamp(24px, 5vw, 72px);
  --max-reading:680px;
  --max-content:1200px;
  --header-height:64px;
}


/* ================================================================
   2. RESET MINIMAL
   ================================================================ */

*, *::before, *::after{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  color:var(--encre);
  background:var(--ivoire);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  hyphens:none;
  -webkit-hyphens:none;
}

/* Typographie française stricte — cohérence site entier.
   Titres : équilibre automatique des lignes (text-wrap: balance),
            pas de césure, pas de mot orphelin sur sa propre ligne.
   Paragraphes : justifiés, dernière ligne non étirée (text-align-last: start),
                 pas de césure, fallback break-word pour URLs/mots longs. */
h1, h2, h3, h4, h5, h6{
  text-wrap:balance;
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:normal;
  word-break:normal;
}

p{
  text-align:justify;
  text-justify:inter-word;
  text-align-last:start;
  hyphens:none;
  -webkit-hyphens:none;
  overflow-wrap:break-word;
  word-break:normal;
  text-wrap:pretty;
}

img, svg, picture{
  max-width:100%;
  display:block;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  background:none;
  border:none;
  font:inherit;
  color:inherit;
  cursor:pointer;
}

ul, ol{ list-style:none; }

input, textarea{
  font:inherit;
  color:inherit;
}

::selection{
  background:var(--safran);
  color:var(--ivoire);
}


/* ================================================================
   3. UTILITAIRES ACCESSIBILITÉ
   ================================================================ */

/* Lien d'évitement accessibilité — masquage absolu via le pattern moderne
   « visually-hidden » : width/height 1px + margin -1px + overflow hidden +
   double clip (legacy rect + moderne clip-path inset 50%). Invisible même
   si un user-agent tente de le focus automatiquement. */
.skip-link {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  clip: auto;
  clip-path: none;
  white-space: normal;
  padding: 0.75rem 1.25rem;
  background-color: #1A2744;
  color: #FBF3E3;
  text-decoration: none;
  z-index: 10000;
  font-family: Raleway, sans-serif;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
}

/* Contenu masqué visuellement mais lisible par lecteurs d'écran */
.visu-masque{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0, 0, 0, 0);
  white-space:nowrap;
  border:0;
}


/* ================================================================
   4. PRIMITIVES ÉDITORIALES
   Réutilisées par toutes les pages.
   ================================================================ */

/* Bloc de section — padding fluide, couleurs via modificateurs */
.block{
  position:relative;
  padding-block:clamp(80px, 10vh, 120px);
  padding-inline:var(--gutter);
  overflow:hidden;
}
.block--dark{ background:var(--encre); color:var(--ivoire); }
.block--light{ background:var(--ivoire); color:var(--encre); }

/* Folio — pagination éditoriale ancrée DANS chaque bloc, en haut à droite.
   Positionné sous le header fixe via calc(--header-height + offset) pour
   rester lisible quelle que soit la hauteur du header. */
.folio{
  position:absolute;
  top:calc(var(--header-height) + 12px);
  right:20px;
  font-family:var(--font-corps);
  font-weight:500;
  font-size:10px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--turquoise);
  z-index:2;
}

@media (min-width:768px){
  .folio{
    top:calc(var(--header-height) + 20px);
    right:40px;
    font-size:11px;
  }
}

/* Masquage des folios sur mobile (≤ 768 px) : libère la zone droite
   et supprime toute contrainte de padding-top pour accueillir le folio. */
@media (max-width:768px){
  .folio{
    display:none;
  }
}

/* Filet vertical signature — ancré DANS chaque bloc, en haut à gauche,
   relatif au conteneur .block (qui porte position: relative).
   Positionné dans la zone typographique du bloc, pas entre header et hero. */
.marque-verticale{
  position:absolute;
  top:24px;
  left:20px;
  width:0.5px;
  height:60px;
  background-color:#1B7A78;
  z-index:2;
}

@media (min-width:768px){
  .marque-verticale{
    top:40px;
    left:40px;
  }
}

/* Eyebrow — petite étiquette de qualification */
.eyebrow{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:12px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--turquoise);
  display:inline-block;
}
.eyebrow--sm{ font-size:10px; }

/* Eyebrow avec filets latéraux harmonisés — 0.5 px × 20 px, gap 12 px.
   inline-flex : largeur = contenu (filets + texte + filets). L'alignement
   horizontal est délégué au parent :
   · parent align-items:center  → eyebrow centrée visuellement
   · parent align-items:stretch → eyebrow collée à gauche naturellement
   Le nom --centered est conservé pour rétro-compatibilité. */
.eyebrow--centered{
  display:inline-flex;
  align-items:center;
  gap:12px;
}
.eyebrow--centered::before,
.eyebrow--centered::after{
  content:'';
  display:block;
  width:20px;
  height:0.5px;
  background:var(--turquoise);
  flex-shrink:0;
}

/* Titre éditorial — Cormorant italic, line-height tight */
.titre{
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  line-height:0.95;
  letter-spacing:-0.01em;
}

/* Corps de lecture — Raleway 300, line-height aéré */
.prose{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:16px;
  line-height:1.8;
  max-width:var(--max-reading);
}
.prose--justify{ text-align:justify; }

/* CTA primaire — Safran plein, Ivoire text, lettres UPPERCASE espacées */
.cta{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:16px 32px;
  background:var(--safran);
  color:var(--ivoire);
  font-family:var(--font-corps);
  font-weight:500;
  font-size:13px;
  letter-spacing:var(--tracking-cta);
  text-transform:uppercase;
  border:none;
  border-radius:0;
  transition:transform 0.35s var(--ease), background 0.35s var(--ease);
  cursor:pointer;
}
.cta:hover,
.cta:focus-visible{
  transform:translateY(-2px);
  background:var(--safran-fonce);
}
.cta__arrow{
  display:inline-block;
  transition:transform 0.35s var(--ease);
}
.cta:hover .cta__arrow,
.cta:focus-visible .cta__arrow{
  transform:translateX(4px);
}

/* Lien texte souligné — Turquoise, espace qui s'élargit au hover */
.lien{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-corps);
  font-weight:500;
  font-size:13px;
  letter-spacing:var(--tracking-lien);
  text-transform:uppercase;
  color:var(--turquoise);
  padding-bottom:4px;
  border-bottom:0.5px solid var(--turquoise);
  transition:gap 0.3s var(--ease), color 0.3s var(--ease);
}
.lien:hover,
.lien:focus-visible{ gap:14px; }

/* Variante Encre pour fond Ivoire */
.lien--encre{
  color:var(--encre);
  border-color:var(--encre);
}

/* Filet horizontal — trait fin qui scande la page */
.filet{
  display:block;
  height:0.5px;
  background:currentColor;
  opacity:0.4;
  width:100%;
}
.filet--turquoise{
  background:var(--turquoise);
  opacity:1;
}

/* Reveal au scroll — progressive enhancement.
   Par défaut, `.reveal` est pleinement visible : si JavaScript est
   désactivé, échoue à charger ou est bloqué par une extension, le
   contenu reste lisible sans dépendre de l'animation.
   Lorsque JS tourne, il ajoute `.js-ready` sur `<html>` (inline en
   tête de body), ce qui active le masquage initial. L'observer ajoute
   ensuite `.is-in` à mesure que chaque élément entre dans le viewport. */
.reveal{
  transition:opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change:opacity, transform;
}
.js-ready .reveal:not(.is-in){
  opacity:0;
  transform:translateY(18px);
}
.reveal.is-in{
  opacity:1;
  transform:none;
}

/* Signature Pinyon Script — usage strictement réservé à « — Ludmila »
   sur les pages /fondatrice et /contact. Réutilisable comme primitive. */
.signature{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}
.signature__nom{
  font-family:var(--font-bijou);
  font-size:clamp(26px, 2.6vw, 32px);
  color:var(--turquoise);
  line-height:1;
}
.signature__role{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:10px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--encre);
  opacity:0.7;
}

/* Respect des préférences utilisateur — animations réduites */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .reveal,
  .js-ready .reveal:not(.is-in){
    opacity:1;
    transform:none;
  }
}


/* ================================================================
   5. HEADER — barre de navigation minimale et sobre
   Transparent au chargement, Ivoire + filet Turquoise au scroll.
   ================================================================ */

.site-header{
  position:fixed;
  top:0; left:0; right:0;
  z-index:100;
  background:transparent;
  border-bottom:0.5px solid transparent;
  transition:background 0.4s var(--ease),
             border-bottom-color 0.4s var(--ease),
             backdrop-filter 0.4s var(--ease);
}
.site-header.is-scrolled{
  background:rgba(251, 243, 227, 0.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:rgba(27, 122, 120, 0.25);
}

.site-header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:var(--header-height);
  padding:0 var(--gutter);
  max-width:1440px;
  margin:0 auto;
  gap:24px;
}

/* Logo header — container flex pour image PNG (Logo-encre).
   Le parent n'applique aucune contrainte de taille : il délègue
   entièrement à l'image. Hauteur fixe 72 px desktop · 56 px mobile.
   Note desktop : 72 px dans un header de 64 px → logo débord de ~4 px
   haut et bas (centré via align-items: center du flex inner).
   max-height/max-width: none pour neutraliser le `img { max-width: 100% }` global. */
.site-header__logo {
  display: flex;
  align-items: center;
  line-height: 1;
}

.site-header__logo img {
  height: 72px;
  width: auto;
  max-height: none;
  max-width: none;
  display: block;
}

@media (max-width: 767px) {
  .site-header__logo img {
    height: 56px;
  }
}

/* Nav desktop — cachée en mobile/tablet. Chaque item sur 1 ligne. */
.site-nav{
  display:none;
  gap:24px;
  align-items:center;
}
.site-nav a{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:11px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--encre);
  transition:color 0.3s var(--ease);
  position:relative;
  padding:4px 0;
  white-space:nowrap;
}
.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"]{
  color:var(--turquoise);
}

/* CTA header — Safran compact, cachée en mobile */
.site-header__cta{
  display:none;
  align-items:center;
  gap:10px;
  padding:10px 22px;
  background:var(--safran);
  color:var(--ivoire);
  font-family:var(--font-corps);
  font-weight:500;
  font-size:10px;
  letter-spacing:var(--tracking-cta);
  text-transform:uppercase;
  transition:background 0.3s var(--ease), transform 0.3s var(--ease);
}
.site-header__cta:hover,
.site-header__cta:focus-visible{
  background:var(--safran-fonce);
  transform:translateY(-1px);
}

/* Burger mobile — visible en mobile uniquement */
.site-header__burger{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px; height:32px;
  padding:6px 2px;
}
.site-header__burger span{
  display:block;
  width:100%; height:1px;
  background:var(--encre);
  transform-origin:center;
  transition:transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
.site-header__burger[aria-expanded="true"] span:nth-child(1){
  transform:translateY(6px) rotate(45deg);
}
.site-header__burger[aria-expanded="true"] span:nth-child(2){
  opacity:0;
}
.site-header__burger[aria-expanded="true"] span:nth-child(3){
  transform:translateY(-6px) rotate(-45deg);
}

/* Menu mobile plein écran — slide depuis la droite */
.site-menu-mobile{
  position:fixed;
  top:var(--header-height);
  left:0; right:0; bottom:0;
  background:var(--ivoire);
  padding:48px var(--gutter);
  transform:translateX(100%);
  transition:transform 0.4s var(--ease);
  overflow-y:auto;
  z-index:99;
}
.site-menu-mobile.is-open{ transform:translateX(0); }

.site-menu-mobile nav{
  display:flex;
  flex-direction:column;
  gap:28px;
  max-width:480px;
  margin:0 auto;
}
.site-menu-mobile nav a:not(.cta){
  font-family:var(--font-titre);
  font-style:italic;
  font-weight:500;
  font-size:28px;
  color:var(--encre);
  line-height:1.2;
  transition:color 0.3s var(--ease);
}
.site-menu-mobile nav a:not(.cta):hover,
.site-menu-mobile nav a:not(.cta)[aria-current="page"]{
  color:var(--turquoise);
}
.site-menu-mobile .cta{
  margin-top:16px;
  align-self:flex-start;
}

/* Breakpoint desktop — bascule nav visible + burger caché à 1280 px.
   En dessous (tablet 768-1279 px et mobile < 768 px) : menu hamburger.
   !important sur burger/menu-mobile pour verrouiller absolument leur
   masquage en desktop (pas de clignotement possible via cascade). */
@media (min-width:1280px){
  .site-nav{ display:flex; }
  .site-header__cta{ display:inline-flex; }
  .site-header__burger{ display:none !important; }
  .site-menu-mobile{ display:none !important; }
}


/* ================================================================
   6. FOOTER — fond Encre, 3 colonnes desktop, empilé mobile
   ================================================================ */

.site-footer{
  background:var(--encre);
  color:var(--ivoire);
  padding:clamp(72px, 10vh, 120px) var(--gutter) clamp(40px, 5vh, 64px);
}

.site-footer__grille{
  max-width:var(--max-content);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:0.5px solid rgba(251, 243, 227, 0.2);
}

.site-footer__col h4{
  font-family:var(--font-corps);
  font-weight:500;
  font-size:11px;
  letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;
  color:var(--turquoise);
  margin-bottom:20px;
}

/* Logo footer — image PNG (Logo-ivoire) sur fond Encre.
   Pas de lien (le logo footer est une signature, pas un retour accueil).
   Hauteur : 96 px desktop (signature pleine amplitude) · 80 px mobile.
   max-height/max-width: none pour neutraliser le `img { max-width: 100% }` global. */
.site-footer__logo {
  height: 96px;
  width: auto;
  max-height: none;
  max-width: none;
  display: block;
  margin-bottom: 16px;
}

@media (max-width: 767px) {
  .site-footer__logo {
    height: 80px;
  }
}

.site-footer__baseline{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:14px;
  line-height:1.7;
  color:var(--ivoire);
  opacity:0.8;
  max-width:280px;
  text-align:center !important;
  text-align-last:center !important;
  hyphens:none !important;
  -webkit-hyphens:none !important;
}

.site-footer__nav{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.site-footer__nav a{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:14px;
  color:var(--ivoire);
  opacity:0.9;
  transition:color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.site-footer__nav a:hover,
.site-footer__nav a:focus-visible{
  color:var(--turquoise);
  opacity:1;
}

/* Bloc liste d'attente — formulaire Incarnat */
.waitlist__texte{
  font-family:var(--font-corps);
  font-weight:300;
  font-size:14px;
  line-height:1.7;
  color:var(--ivoire);
  opacity:0.85;
  margin-bottom:20px;
  text-align:justify;
  text-align-last:start;
  hyphens:none;
}
.waitlist__form{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.waitlist__input{
  flex:1 1 200px;
  background:transparent;
  border:0.5px solid rgba(251, 243, 227, 0.3);
  color:var(--ivoire);
  padding:14px 16px;
  font-family:var(--font-corps);
  font-weight:300;
  font-size:13px;
  letter-spacing:0.04em;
  transition:border-color 0.3s var(--ease);
}
.waitlist__input:focus{
  outline:none;
  border-color:var(--turquoise);
}
.waitlist__input::placeholder{
  color:var(--ivoire);
  opacity:0.45;
}
.waitlist__submit{
  padding:14px 24px;
  background:var(--safran);
  color:var(--ivoire);
  font-family:var(--font-corps);
  font-weight:500;
  font-size:11px;
  letter-spacing:var(--tracking-cta);
  text-transform:uppercase;
  border:none;
  cursor:pointer;
  transition:background 0.3s var(--ease), transform 0.3s var(--ease);
}
.waitlist__submit:hover:not(:disabled),
.waitlist__submit:focus-visible:not(:disabled){
  background:var(--safran-fonce);
  transform:translateY(-1px);
}
.waitlist__submit:disabled{
  opacity:0.55;
  cursor:not-allowed;
  transform:none;
}

.site-footer__bas{
  max-width:var(--max-content);
  margin:40px auto 0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  font-family:var(--font-corps);
  font-weight:300;
  font-size:11px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--ivoire);
  opacity:0.55;
}

/* Breakpoint desktop — footer 3 colonnes */
@media (min-width:860px){
  .site-footer__grille{
    grid-template-columns:1.4fr 1fr 1.4fr;
    gap:clamp(40px, 5vw, 80px);
  }
}