/* ==========================================================================
   FICHIER GÉNÉRÉ — NE PAS ÉDITER À LA MAIN
   Produit par tools/sync-tokens.sh depuis _ds/…/tokens/.
   Pour modifier un token : éditez le design system, puis relancez le script.
   Les corrections d'accessibilité sont regroupées en fin de fichier.
   ========================================================================== */

/* --- colors.css ------------------------------------------------------- */
/* Sora Sens — couleurs. Palette issue de la planche de marque (p.10 du dossier). */
:root{
  /* Base — 6 couleurs de marque nommées */
  --coquille:#F7F2EB;   /* lumière   */
  --lin:#EFE8DE;        /* douceur   */
  --sable:#DDD1BF;      /* équilibre */
  --dore-mat:#C7A56A;   /* lumière   */
  --terre-cuite:#B96B4B;/* chaleur   */
  --cacao:#59453A;      /* ancrage   */

  /* Nuances dérivées (oklch, même famille) */
  --coquille-haut:#FCFAF6;
  --lin-fonce:#E4DACC;
  --sable-clair:#E9E0D2;
  --sable-fonce:#CDBEA7;
  --dore-clair:#DFC694;
  --dore-fonce:#A8863F;
  --terre-cuite-clair:#D08D6F;
  --terre-cuite-fonce:#974932;
  --cacao-clair:#7A6252;
  --cacao-fonce:#3B2E26;

  /* Encre & texte */
  --ink:#3B2E26;
  --text-title:var(--cacao-fonce);
  --text-body:var(--cacao);
  --text-muted:var(--cacao-clair);
  --text-subtle:#8C7867;
  --text-accent:var(--terre-cuite-fonce);
  --text-on-dark:var(--coquille);
  --text-on-terracotta:#FBF4EE;

  /* Surfaces */
  --surface-page:var(--coquille);
  --surface-raised:var(--coquille-haut);
  --surface-card:#FDFBF8;
  --surface-sunken:var(--lin);
  --surface-muted:var(--sable-clair);
  --surface-accent:var(--terre-cuite);
  --surface-dark:var(--cacao);
  --surface-gold:var(--dore-mat);
  --surface-overlay:rgba(59,46,38,.44);

  /* Bordures */
  --border-hairline:rgba(89,69,58,.14);
  --border-soft:rgba(89,69,58,.22);
  --border-strong:rgba(89,69,58,.38);
  --border-gold:rgba(199,165,106,.55);
  --border-on-dark:rgba(247,242,235,.28);

  /* Sémantiques */
  --sauge:#7C8A6B;
  --success:var(--sauge);
  --success-surface:#EDF0E7;
  --warning:var(--dore-fonce);
  --warning-surface:#F7EFDE;
  --danger:var(--terre-cuite-fonce);
  --danger-surface:#F6E7E0;
  --info:var(--cacao-clair);
  --info-surface:var(--lin);

  /* États interactifs */
  --focus-ring:rgba(199,165,106,.65);
  --hover-veil:rgba(59,46,38,.05);
  --press-veil:rgba(59,46,38,.10);
}

/* --- typography.css ------------------------------------------------------- */
/* Sora Sens — typographie. Cormorant Garamond pour les titres, Montserrat (subst.
   d'Avenir Next) pour les textes. Le logotype « SORA SENS » ne se recompose jamais :
   utiliser assets/logo-sora-sens.png. */
:root{
  /* « … repli » sont les faces à métriques ajustées déclarées dans fonts.css
     (size-adjust, ascent-override…). Elles y étaient définies mais absentes de
     ces piles : elles ne servaient donc à rien. Placées juste après la police
     réelle, elles suppriment le décalage de mise en page au moment du swap. */
  --font-display:"Cormorant Garamond","Cormorant repli","Cormorant",Georgia,serif;
  --font-text:"Montserrat","Montserrat repli","Avenir Next","Avenir",system-ui,sans-serif;

  --weight-light:300; /* @kind font */
  --weight-regular:400; /* @kind font */
  --weight-medium:500; /* @kind font */
  --weight-semibold:600; /* @kind font */

  /* Échelle d'affichage (Cormorant) */
  --size-display-xl:76px;  --lh-display-xl:1.02; /* @kind other */
  --size-display-l:56px;   --lh-display-l:1.06; /* @kind other */
  --size-display-m:40px;   --lh-display-m:1.12; /* @kind other */
  --size-display-s:30px;   --lh-display-s:1.18; /* @kind other */
  --size-title:24px;       --lh-title:1.30; /* @kind other */

  /* Échelle de texte (Montserrat) */
  --size-body-l:18px;      --lh-body-l:1.72; /* @kind other */
  --size-body:16px;        --lh-body:1.70; /* @kind other */
  --size-body-s:14px;      --lh-body-s:1.64; /* @kind other */
  --size-caption:12px;     --lh-caption:1.50; /* @kind other */

  /* Interlettrages */
  --track-display:0.02em; /* @kind other */      /* Cormorant en capitales */
  --track-display-tight:0em; /* @kind other */
  --track-eyebrow:0.22em; /* @kind other */      /* surtitres capitales fines */
  --track-label:0.10em; /* @kind other */        /* labels, boutons */
  --track-body:0.005em; /* @kind other */

  /* Rôles composés */
  --type-eyebrow:var(--weight-medium) var(--size-caption)/var(--lh-caption) var(--font-text); /* @kind font */
  --type-label:var(--weight-semibold) var(--size-body-s)/1.2 var(--font-text); /* @kind font */
  --type-body:var(--weight-regular) var(--size-body)/var(--lh-body) var(--font-text); /* @kind font */
  --type-lead:var(--weight-light) var(--size-body-l)/var(--lh-body-l) var(--font-text); /* @kind font */
  --type-price:var(--weight-regular) var(--size-body)/1.5 var(--font-text); /* @kind font */
  --type-title:var(--weight-medium) var(--size-title)/var(--lh-title) var(--font-display); /* @kind font */
  --type-display:var(--weight-light) var(--size-display-l)/var(--lh-display-l) var(--font-display); /* @kind font */
}

/* --- spacing.css ------------------------------------------------------- */
/* Sora Sens — espacements. Base 4px. La marque respire : préférer les crans hauts. */
:root{
  --space-0:0;
  --space-1:2px;
  --space-2:4px;
  --space-3:8px;
  --space-4:12px;
  --space-5:16px;
  --space-6:20px;
  --space-7:24px;
  --space-8:32px;
  --space-9:40px;
  --space-10:56px;
  --space-11:72px;
  --space-12:96px;
  --space-13:128px;
  --space-14:160px;

  /* Rythme de page */
  --gutter:24px;
  --gutter-wide:40px;
  --section-y:96px;          /* mobile  */
  --section-y-lg:160px;      /* desktop */
  --content-max:1200px;
  --prose-max:62ch; /* @kind other */
  --measure-narrow:46ch; /* @kind other */
}

/* --- radii.css ------------------------------------------------------- */
/* Sora Sens — rayons. Angles francs pour l'image, capsules pour l'action,
   grande arche organique pour les blocs signature (cf. planche de marque). */
:root{
  --radius-none:0;
  --radius-xs:2px;
  --radius-sm:4px;
  --radius-md:8px;
  --radius-lg:16px;
  --radius-xl:28px;
  --radius-pill:999px;
  --radius-circle:50%;
  /* Arche : haut arrondi plein, base droite */
  --radius-arch:200px 200px 0 0; /* @kind radius */
  --radius-arch-sm:120px 120px 0 0; /* @kind radius */
  /* Galet : ovale irrégulier, pour vignettes photo douces */
  --radius-galet:52% 48% 46% 54% / 46% 52% 48% 54%; /* @kind radius */

  --border-width-hairline:1px; /* @kind other */
  --border-width-strong:2px; /* @kind other */
}

/* --- elevation.css ------------------------------------------------------- */
/* Sora Sens — ombres. Toujours teintées cacao, jamais neutres ni noires.
   Diffuses et basses en opacité : on suggère la lumière naturelle, pas l'élévation UI. */
:root{
  --shadow-none:none;
  --shadow-hairline:0 0 0 1px var(--border-hairline);
  --shadow-soft:0 1px 2px rgba(89,69,58,.04), 0 8px 24px rgba(89,69,58,.06);
  --shadow-lift:0 2px 4px rgba(89,69,58,.05), 0 18px 44px rgba(89,69,58,.10);
  --shadow-float:0 4px 8px rgba(89,69,58,.06), 0 32px 72px rgba(89,69,58,.14);
  --shadow-inset:inset 0 1px 2px rgba(89,69,58,.07);
  --shadow-focus:0 0 0 3px var(--focus-ring);

  /* Voiles de protection sur photographie (texte lisible sans assombrir l'image) */
  --veil-bottom:linear-gradient(to top,rgba(59,46,38,.62) 0%,rgba(59,46,38,.28) 38%,rgba(59,46,38,0) 78%); /* @kind other */
  --veil-full:linear-gradient(to bottom,rgba(59,46,38,.30),rgba(59,46,38,.46)); /* @kind other */
  --veil-side:linear-gradient(to right,rgba(59,46,38,.55) 0%,rgba(59,46,38,0) 62%); /* @kind other */

  --blur-glass:saturate(120%) blur(14px); /* @kind other */
}

/* --- motion.css ------------------------------------------------------- */
/* Sora Sens — mouvement. Rien ne rebondit, rien ne claque : tout glisse et se dévoile.
   Une seule courbe pour toute la marque. */
:root{
  --ease-soft:cubic-bezier(.22,.61,.36,1); /* @kind other */
  --ease-in-soft:cubic-bezier(.55,.06,.68,.19); /* @kind other */
  --ease-inout-soft:cubic-bezier(.42,.0,.24,1); /* @kind other */

  --dur-instant:90ms; /* @kind other */
  --dur-quick:180ms; /* @kind other */
  --dur-base:280ms; /* @kind other */
  --dur-slow:520ms; /* @kind other */
  --dur-reveal:900ms; /* @kind other */

  --transition-color:color var(--dur-quick) var(--ease-soft),background-color var(--dur-quick) var(--ease-soft),border-color var(--dur-quick) var(--ease-soft); /* @kind other */
  --transition-soft:all var(--dur-base) var(--ease-soft); /* @kind other */
  --reveal-shift:18px; /* @kind spacing */   /* translation d'apparition, jamais plus */
  --hover-shift:-2px; /* @kind spacing */    /* remontée au survol des cartes */
  --press-scale:.985; /* @kind other */    /* léger tassement à l'appui */
}

/* --- fonts.css : écarté, voir css/fonts.css (auto-hébergement) ----- */

/* --- base.css (règle :focus-visible retirée, voir corrections) ----- */
/* Sora Sens — réglages de base. Minimal : le design system fournit des tokens,
   pas un framework. Ne contient que ce qui doit être vrai partout. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--surface-page);color:var(--text-body);font:var(--type-body);letter-spacing:var(--track-body);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:var(--weight-light);color:var(--text-title);letter-spacing:var(--track-display);text-wrap:pretty}
h1{font-size:var(--size-display-l);line-height:var(--lh-display-l)}
h2{font-size:var(--size-display-m);line-height:var(--lh-display-m)}
h3{font-size:var(--size-display-s);line-height:var(--lh-display-s)}
h4{font-size:var(--size-title);line-height:var(--lh-title);font-weight:var(--weight-medium)}
p{margin:0 0 1em;text-wrap:pretty}
p:last-child{margin-bottom:0}
/* SPÉCIFICITÉ VOLONTAIREMENT MINIMALE — ne pas écrire « a:not(.btn) » ici.
   Cette variante a été essayée puis retirée : elle porte la spécificité à
   (0,1,1) et surclasse alors TOUTE règle de lien à une seule classe. Elle avait
   ainsi rendu au logo de l'en-tête (.entete__logo, qui pose border:0) et aux
   onglets (.onglet, border transparent) un souligné doré qu'ils annulaient.
   Le cas des boutons est traité dans site.css, au niveau des boutons. */
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid var(--border-gold);padding-bottom:1px;transition:var(--transition-color)}
a:hover{color:var(--cacao-fonce);border-bottom-color:var(--cacao-fonce)}
img{display:block;max-width:100%}
button{font:inherit;color:inherit}
::selection{background:var(--sable);color:var(--cacao-fonce)}
hr{border:none;border-top:1px solid var(--border-hairline);margin:var(--space-9) 0}
::placeholder{color:var(--text-subtle);opacity:1}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ==========================================================================
   CORRECTIONS D'ACCESSIBILITÉ
   Chaque valeur ci-dessous a été mesurée. Les ratios indiqués sont réels.
   Ne pas « simplifier » en revenant aux valeurs du design system : elles
   échouent aux critères WCAG AA rappelés en commentaire.
   ========================================================================== */

:root{
  /* Texte indicatif et surtitres — était #8C7867 (3,46:1 sur lin).
     WCAG 1.4.3 s'applique aussi au texte de substitution des champs. */
  --text-subtle:#6F5B4B;              /* 5,27 lin · 5,76 coquille · 6,21 carte */

  /* Fond du bandeau signature quand il porte du texte de petit corps.
     --terre-cuite (#B96B4B) plafonne à 3,66:1 : suffisant pour un titre
     de 24 px et plus, insuffisant pour un libellé de bouton à 12–14 px.
     La couleur de marque reste inchangée pour les aplats et les filets. */
  --terre-cuite-moyen:#A85539;
  --surface-accent:var(--terre-cuite-moyen);   /* 4,79 avec --text-on-terracotta */

  /* Anneau de focus — était rgba(199,165,106,.65), soit 1,58:1 une fois
     composité sur la coquille : invisible. WCAG 1.4.11 demande 3:1.
     Aucune couleur unique ne passe à la fois sur fond clair et sur l'encre,
     d'où deux tokens, appliqués par portée (voir site.css). */
  --focus-ring:#8A6B2E;               /* 4,46 coquille · 4,09 lin · 4,81 carte */
  --focus-ring-on-dark:#E8C98A;       /* 8,20 sur cacao foncé · 5,63 sur cacao */

  /* Fond sombre — le token pointait sur --cacao (#59453A), en contradiction
     avec le README §Footer qui spécifie #3B2E26. Sur #59453A, la mention
     légale obligatoire tombe à 3,92:1. */
  --surface-dark:var(--cacao-fonce);  /* #3B2E26 */

  /* États sémantiques — les deux échouaient sur leur propre surface. */
  --warning:#7E6428;                  /* 4,91 sur --warning-surface (était 2,99) */
  --success:#586348;                  /* 5,53 sur --success-surface (était 3,19) */
  --sauge-fonce:#586348;              /* --sauge reste disponible pour les aplats */
}

/* Focus visible — outline réel plutôt que box-shadow : il suit la forme de
   l'élément et survit au mode contraste forcé. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;outline-offset:2px}
}