/* ==========================================================================
   tokens.css — design system · Librairie L'Oiseau Moqueur (Sucy-en-Brie)
   Refonte « color-block éditorial » : papier clair comme sol, aplats saturés
   comme respirations. Aucune règle de mise en page ici.

   SYSTÈME DE COULEUR — une seule règle, tenue partout
   ---------------------------------------------------
   Le site est en thème clair. Il ne bascule jamais en « dark mode » :
   il pose des CARTONS DE COULEUR pleine largeur (.bloc[data-ton]) qui
   redéfinissent localement --ton-fond / --ton-texte / --ton-accent.
   Un composant écrit une fois avec ces variables fonctionne sur les cinq
   fonds sans une seule règle en plus.

   SYSTÈME DE FORME — une seule échelle
   ------------------------------------
   Interactif (boutons, chips, champs, pastilles) = pilule intégrale.
   Blocs et médias = 20px / 32px. Petites étiquettes = 10px. Rien d'autre.
   ========================================================================== */

:root {
  /* ---- Palette de marque ---------------------------------------------
     Issue de la façade : le bleu nuit de l'enseigne, le jaune du bec,
     le corail qui fait agir. Le vert d'eau est ajouté pour les univers
     jeunesse / BD, là où il faut un signal frais et distinct du corail. */
  --nuit:        #06162F;   /* bleu nuit — encre et cartons profonds */
  --nuit-2:      #0C2450;   /* nuit remontée — surfaces sur fond nuit */
  --bleu:        #12379C;   /* bleu enseigne, plus électrique qu'avant */
  --bleu-clair:  #4C7BF4;

  --jaune:       #FFD629;   /* jaune lecture — carton chaud, signature */
  --jaune-doux:  #FFE97A;
  --jaune-lisible: #8A6A00; /* jaune assombri, seul usage : texte sur clair */

  --corail:      #FF4F33;   /* corail — conversion : réserver, itinéraire */
  --corail-fonce:#DC3A20;   /* survol d'aplat */
  --corail-texte:#BD3319;   /* corail assombri : seul usage, petit texte sur clair */
  --menthe:      #12B981;   /* frais — jeunesse, BD, disponibilité */

  /* ---- Sol clair -------------------------------------------------------
     Blanc cassé très légèrement chaud : du papier, pas un écran. */
  --papier:      #FBFAF7;
  --papier-2:    #F2EFE8;   /* papier alterné, cartes posées */
  --papier-3:    #E6E1D6;   /* filets pleins, fonds d'image en attente */
  --blanc:       #FFFFFF;

  --encre:       #06162F;   /* texte principal — jamais #000 */
  --encre-douce: #47546F;
  --encre-tenue: #626C82;

  /* ---- Alias de compatibilité (pages non encore reprises) -------------- */
  --brand:        var(--bleu);
  --brand-dark:   var(--nuit);
  --brand-light:  var(--bleu-clair);
  --brand-tint:   color-mix(in srgb, var(--bleu) 6%, var(--papier));
  --brand-veil:   color-mix(in srgb, var(--bleu) 14%, transparent);
  --accent:       var(--corail);
  --accent-dark:  #DC3A20;
  --accent-tint:  color-mix(in srgb, var(--corail) 9%, var(--papier));
  --gold:         var(--jaune);
  --gold-deep:    var(--jaune-lisible);
  --sage:         var(--menthe);
  --ink:          var(--encre);
  --ink-soft:     var(--encre-douce);
  --ink-muted:    var(--encre-tenue);
  --ink-invert:   #FBFAF7;
  --surface:      var(--papier);
  --surface-alt:  var(--papier-2);
  --surface-deep: var(--papier-3);
  --surface-dark: var(--nuit);
  --surface-card: var(--blanc);
  --success:      #0F7A55;
  --error:        #C0311C;

  /* ---- Ton courant -----------------------------------------------------
     Valeurs par défaut du sol papier. Chaque .bloc[data-ton] les réécrit.
     TOUT composant doit s'écrire avec ces quatre variables. */
  --ton-fond:      var(--papier);
  --ton-texte:     var(--encre);
  --ton-texte-2:   var(--encre-douce);   /* secondaire, ≥ 4.5:1 sur le fond */
  --ton-texte-3:   var(--encre-tenue);   /* mentions, ≥ 4.5:1 sur le fond */
  --ton-accent:    var(--corail);        /* aplats : ce qui fait agir */
  --ton-accent-texte: var(--corail-texte); /* petit texte accentué, contraste AA */
  --ton-signe:     var(--bleu);          /* micro-signal de marque */
  --ton-filet:     color-mix(in srgb, var(--encre) 14%, transparent);
  --ton-filet-net: color-mix(in srgb, var(--encre) 26%, transparent);
  --ton-carte:     var(--blanc);
  --ton-carte-2:   var(--papier-2);
  --ton-btn-fond:  var(--corail);
  --ton-btn-texte: var(--nuit);

  --line:        var(--ton-filet);
  --line-soft:   color-mix(in srgb, var(--encre) 8%, transparent);
  --line-invert: color-mix(in srgb, #FBFAF7 22%, transparent);

  /* ---- Typographie ----------------------------------------------------
     Bricolage Grotesque : display variable (opsz + wdth + wght). Resserrée
     et lourde en grand, elle donne le côté contemporain demandé sans partir
     dans le « serif littéraire » attendu sur ce métier.
     Manrope : interface, horaires, formulaires — précise et lisible.
     Cormorant italique : réservée aux citations de lecteurs. Un seul usage. */
  --font-display: 'Bricolage Grotesque', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:    'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cite:    'Cormorant Garamond', Georgia, serif;
  /* L'enseigne peinte de la rue du Moutier. Elle ne porte jamais un texte
     long : le nom de la maison, les sur-titres de section, et rien d'autre.
     Une lettre peinte à la main se lit à l'enseigne, pas au paragraphe. */
  --font-enseigne: 'Caveat Brush', 'Bricolage Grotesque', cursive;

  /* Échelle fluide — aucune media query sur la taille de texte. */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.12vw, 0.82rem);
  --fs-sm:   clamp(0.88rem, 0.85rem + 0.15vw, 0.96rem);
  --fs-base: clamp(1.02rem, 0.98rem + 0.20vw, 1.12rem);
  --fs-md:   clamp(1.15rem, 1.06rem + 0.42vw, 1.42rem);
  --fs-lg:   clamp(1.45rem, 1.24rem + 0.95vw, 2.15rem);
  --fs-xl:   clamp(1.95rem, 1.52rem + 1.90vw, 3.30rem);
  --fs-2xl:  clamp(2.50rem, 1.74rem + 3.35vw, 5.00rem);
  --fs-3xl:  clamp(3.10rem, 1.90rem + 5.30vw, 7.20rem);
  --fs-4xl:  clamp(3.60rem, 1.60rem + 8.80vw, 10.50rem);

  --lh-tight: 0.92;   /* display XXL : les lignes doivent se toucher */
  --lh-snug:  1.06;
  --lh-base:  1.62;

  --ls-display: -0.035em;
  --ls-tight:   -0.02em;
  --ls-base:     0;
  --ls-wide:     0.13em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ---- Espacement — base 8 -------------------------------------------- */
  --sp-1:  0.25rem;  --sp-2:  0.5rem;   --sp-3:  0.75rem;  --sp-4:  1rem;
  --sp-5:  1.25rem;  --sp-6:  1.5rem;   --sp-8:  2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;     --sp-16: 4rem;     --sp-24: 6rem;     --sp-32: 8rem;
  --sp-40: 11.25rem;

  --section-y:       clamp(5rem, 3rem + 7.5vw, 12.5rem);
  --section-y-tight: clamp(3.25rem, 2.4rem + 4vw, 6.5rem);

  /* ---- Conteneurs ------------------------------------------------------ */
  --container:      1280px;
  --container-wide: 1560px;
  --container-text: 720px;
  --gutter:         clamp(1.25rem, 0.8rem + 2.4vw, 3.5rem);

  /* ---- Rayons — une seule échelle, appliquée sans exception ------------- */
  --r-chip: 10px;   /* étiquettes */
  --r-md:   14px;
  --r-lg:   20px;   /* cartes, médias */
  --r-xl:   32px;   /* grands blocs, cartons */
  --r-2xl:  44px;
  --r-full: 999px;  /* TOUT ce qui est interactif */

  /* ---- Ombres — teintées bleu, jamais du noir pur ---------------------- */
  --shadow-sm: 0 1px 2px rgb(6 22 47 / .05), 0 2px 6px rgb(6 22 47 / .05);
  --shadow-md: 0 2px 6px rgb(6 22 47 / .05), 0 10px 24px rgb(6 22 47 / .08);
  --shadow-lg: 0 6px 12px rgb(6 22 47 / .05), 0 22px 48px rgb(6 22 47 / .10);
  --shadow-xl: 0 10px 20px rgb(6 22 47 / .06), 0 44px 90px rgb(6 22 47 / .14);

  /* ---- Mouvement -------------------------------------------------------
     Les courbes natives du CSS sont trop molles : elles n'ont pas l'attaque
     qui rend une animation intentionnelle. Trois courbes, pas plus.
     Aucune animation d'interface au-dessus de 300 ms. */
  --d-press:  120ms;   /* retour tactile d'un bouton */
  --d-fast:   160ms;
  --d-base:   220ms;
  --d-slow:   380ms;
  --d-reveal: 900ms;   /* révélation au scroll — hors interface */

  --ease-out:   cubic-bezier(.23, 1, .32, 1);      /* entrée, attaque forte */
  --ease-inout: cubic-bezier(.77, 0, .175, 1);     /* déplacement à l'écran */
  --ease-soft:  cubic-bezier(.4, 0, .2, 1);        /* couleur, survol */

  /* ---- Couches ---------------------------------------------------------- */
  --z-base:    1;
  --z-sticky:  100;
  --z-header:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-grain:   500;

  --header-h: 78px;
}

/* ==========================================================================
   Cartons de couleur — .bloc[data-ton="…"]
   Cinq tons. Chacun redéfinit le contrat de couleur ; les composants
   n'ont rien à savoir du fond sur lequel ils sont posés.
   Contraste vérifié : texte principal ≥ 7:1, secondaire ≥ 4.5:1.
   ========================================================================== */

.bloc { background: var(--ton-fond); color: var(--ton-texte); }

[data-ton="papier"] {
  --ton-fond: var(--papier);
  --ton-texte: var(--encre);
  --ton-texte-2: var(--encre-douce);
  --ton-texte-3: var(--encre-tenue);
  --ton-accent: var(--corail);
  --ton-accent-texte: var(--corail);
  --ton-signe: var(--bleu);
  --ton-filet: color-mix(in srgb, var(--encre) 14%, transparent);
  --ton-filet-net: color-mix(in srgb, var(--encre) 26%, transparent);
  --ton-carte: var(--blanc);
  --ton-carte-2: var(--papier-2);
  --ton-btn-fond: var(--corail);
  --ton-btn-texte: var(--nuit);
}

[data-ton="craie"] {
  --ton-fond: var(--papier-2);
  --ton-texte: var(--encre);
  --ton-texte-2: var(--encre-douce);
  --ton-texte-3: #5D6678;
  --ton-accent: var(--corail);
  --ton-accent-texte: var(--corail);
  --ton-signe: var(--bleu);
  --ton-filet: color-mix(in srgb, var(--encre) 16%, transparent);
  --ton-filet-net: color-mix(in srgb, var(--encre) 28%, transparent);
  --ton-carte: var(--blanc);
  --ton-carte-2: var(--papier);
  --ton-btn-fond: var(--nuit);
  --ton-btn-texte: var(--papier);
}

[data-ton="nuit"] {
  --ton-fond: var(--nuit);
  --ton-texte: #FBFAF7;
  --ton-texte-2: #B9C2D6;
  --ton-texte-3: #939DB4;
  --ton-accent: var(--jaune);
  --ton-accent-texte: var(--jaune);
  --ton-signe: var(--jaune);
  --ton-filet: color-mix(in srgb, #FBFAF7 18%, transparent);
  --ton-filet-net: color-mix(in srgb, #FBFAF7 34%, transparent);
  --ton-carte: var(--nuit-2);
  --ton-carte-2: color-mix(in srgb, #FBFAF7 7%, transparent);
  --ton-btn-fond: var(--jaune);
  --ton-btn-texte: var(--nuit);
}

[data-ton="jaune"] {
  --ton-fond: var(--jaune);
  --ton-texte: var(--nuit);
  --ton-texte-2: #35405C;
  --ton-texte-3: #4A5470;
  --ton-accent: var(--nuit);
  --ton-accent-texte: var(--nuit);
  --ton-signe: var(--corail);
  --ton-filet: color-mix(in srgb, var(--nuit) 20%, transparent);
  --ton-filet-net: color-mix(in srgb, var(--nuit) 38%, transparent);
  --ton-carte: #FFF3B8;
  --ton-carte-2: color-mix(in srgb, var(--nuit) 6%, transparent);
  --ton-btn-fond: var(--nuit);
  --ton-btn-texte: var(--jaune);
}

/* Sur corail vif, le blanc ne dépasse pas 3.3:1 : insuffisant pour du texte
   courant. Règle unique et sans exception : ce qui est posé sur le corail est
   écrit en encre nuit (5.5:1). C'est aussi plus contemporain que le blanc. */
[data-ton="corail"] {
  --ton-fond: var(--corail);
  --ton-texte: var(--nuit);
  --ton-texte-2: color-mix(in srgb, var(--nuit) 88%, transparent);
  --ton-texte-3: color-mix(in srgb, var(--nuit) 78%, transparent);
  --ton-accent: var(--nuit);
  --ton-accent-texte: var(--nuit);
  --ton-signe: var(--nuit);
  --ton-filet: color-mix(in srgb, var(--nuit) 24%, transparent);
  --ton-filet-net: color-mix(in srgb, var(--nuit) 46%, transparent);
  --ton-carte: color-mix(in srgb, #FFFFFF 26%, transparent);
  --ton-carte-2: color-mix(in srgb, var(--nuit) 8%, transparent);
  --ton-btn-fond: var(--nuit);
  --ton-btn-texte: #FFFFFF;
}

/* Compatibilité : les anciennes classes de section pointent vers un ton. */
.section--ivoire { --ton-fond: var(--papier-2); --ton-carte-2: var(--papier); background: var(--ton-fond); }
.section--nuit {
  --ton-fond: var(--nuit); --ton-texte: #FBFAF7; --ton-texte-2: #B9C2D6;
  --ton-texte-3: #939DB4; --ton-accent: var(--jaune);
  --ton-accent-texte: var(--jaune); --ton-signe: var(--jaune);
  --ton-filet: color-mix(in srgb, #FBFAF7 18%, transparent);
  --ton-filet-net: color-mix(in srgb, #FBFAF7 34%, transparent);
  --ton-carte: var(--nuit-2); --ton-carte-2: color-mix(in srgb, #FBFAF7 7%, transparent);
  --ton-btn-fond: var(--jaune); --ton-btn-texte: var(--nuit);
  background: var(--ton-fond); color: var(--ton-texte);
}
.on-dark {
  --ton-texte: #FBFAF7; --ton-texte-2: #B9C2D6; --ton-texte-3: #939DB4;
  --ton-accent: var(--jaune); --ton-accent-texte: var(--jaune);
  --ton-signe: var(--jaune);
  --ton-filet: color-mix(in srgb, #FBFAF7 18%, transparent);
  --ton-filet-net: color-mix(in srgb, #FBFAF7 34%, transparent);
  --ton-carte: var(--nuit-2); --ton-carte-2: color-mix(in srgb, #FBFAF7 7%, transparent);
  --ton-btn-fond: var(--jaune); --ton-btn-texte: var(--nuit);
  color: var(--ton-texte);
}

/* ==========================================================================
   États de départ des animations
   Posés sous html.js : sans JS, tout le contenu reste visible. Une animation
   qui ne démarre pas ne doit jamais masquer la page.
   ========================================================================== */

html.js [data-reveal="fade"],
html.js [data-reveal="stagger"] > *,
html.js [data-entree] {
  opacity: 0;
  transform: translateY(28px);
}

/* Rien n'apparaît de nulle part dans le monde réel : jamais scale(0). */
html.js [data-reveal="pop"] > * {
  opacity: 0;
  transform: translateY(20px) scale(.96);
}

html.js [data-reveal="mask"] > *,
html.js [data-reveal="lines"] .ligne > span {
  opacity: 0;
  transform: translateY(102%);
}

html.js [data-reveal="clip"] { clip-path: inset(0 0 100% 0); }

html.js [data-reveal="lines"] .ligne {
  display: block;
  overflow: hidden;
  /* Réserve pour les jambages des lettres descendantes (g, j, p, q, y) :
     sans elle, overflow:hidden les rogne sur une display à lh 0.92. */
  padding-bottom: .08em;
  margin-bottom: -.08em;
}
html.js [data-reveal="lines"] .ligne > span { display: block; will-change: transform; }

/* Le masque appartient au H2 et l'élément intérieur porte seul le mouvement.
   Le débord réservé évite de rogner les jambages des fontes display. */
.titre-reveal__masque {
  display: block;
  overflow: clip;
  margin-block: -.08em -.13em;
  padding-block: .08em .13em;
}

.titre-reveal__texte { display: block; }

/* Le rideau d'ouverture ne doit exister que si le JS peut le retirer. */
html.js .rideau { display: grid; }
.rideau { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal] > *,
  html.js [data-entree],
  html.js [data-reveal] .ligne > span {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  html.js .rideau { display: none !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Grain — une seule couche fixe, non scrollée, sans interception du pointeur.
   Appliqué à un conteneur qui défile, il repeint le GPU en continu et détruit
   le framerate mobile.
   ========================================================================== */

.grain {
  position: fixed;
  inset: -100%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .grain { display: none; } }

/* ==========================================================================
   Images — ratio réservé + repli tant qu'un .webp manque
   ========================================================================== */

.media {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--papier-3);
}
.media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--d-slow) var(--ease-out);
}
a:hover > .media > img,
.card:hover .media > img { transform: scale(1.03); }

.media.is-placeholder {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--bleu) 22%, var(--papier-3)),
    color-mix(in srgb, var(--jaune) 30%, var(--papier-2)));
}
.media.is-placeholder > img { opacity: 0; color: transparent; }
.media.is-placeholder::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: var(--sp-4);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--nuit) 55%, transparent);
}
.signature__pastille.is-placeholder::after { content: none; }

/* ==========================================================================
   Mentions [à confirmer] — restent visibles, servent de checklist client
   ========================================================================== */

.tbc {
  background: color-mix(in srgb, var(--jaune) 42%, transparent);
  box-shadow: inset 0 -1px 0 var(--jaune-lisible);
  padding: 0 .22em;
  font-style: normal;
  color: inherit;
}
[data-ton="nuit"] .tbc,
[data-ton="corail"] .tbc,
.section--nuit .tbc,
.on-dark .tbc {
  background: color-mix(in srgb, var(--jaune) 24%, transparent);
  box-shadow: inset 0 -1px 0 var(--jaune);
}
[data-ton="jaune"] .tbc,
.encart--gold .tbc {
  background: color-mix(in srgb, var(--nuit) 12%, transparent);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--nuit) 40%, transparent);
}