/* Site kanol.fr, porté depuis le HTML arbitré du Designer (landing plus Raconter).
   Charte typo : les six polices se changent ici plus dans le lien Google Fonts des pages. */
:root {
  --font-corps: 'Instrument Sans', system-ui, sans-serif;
  --font-lecture: 'Spectral', Georgia, serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-logo-k: 'Syne', sans-serif;
  --font-logo-mot: 'Unbounded', sans-serif;
  --font-manuscrit: 'Caveat', cursive;

  --nuit: #0E0E0E;
  --encre: #111111;
  --papier: #E7E7E4;
  --gris: #9A9A96;
  --gris-clair: #B8B8B4;
  --gris-sombre: #8A8A86;
  --gris-encre: #5A5A57;
  --gris-encre-fort: #3A3A38;
  --trait: rgba(231,231,228,.1);
  --trait-moyen: rgba(231,231,228,.12);
  --trait-fort: rgba(231,231,228,.25);

  --interligne-notes: 28px;   /* le pas des lignes du bloc-notes */
  --largeur: 1120px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--nuit); color: var(--papier); }
body { font-family: var(--font-corps); -webkit-font-smoothing: antialiased; }
a { color: var(--papier); text-decoration: none; border-bottom: 1px solid rgba(231,231,228,.4); }
a:hover { border-bottom-color: var(--papier); }
button { font-family: inherit; }
input, textarea { outline: none; }
::placeholder { color: var(--gris-sombre); }
svg { display: block; }

/* ---------- Éléments communs ---------- */
.etiquette { margin: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.manuscrit { font-family: var(--font-manuscrit); font-weight: 600; line-height: 1; display: inline-block; transform: rotate(-1.5deg); }

.logo { display: flex; align-items: baseline; font-size: 22px; line-height: 1; text-box: trim-both cap alphabetic; border: none; }
.logo-k { display: inline-block; font-family: var(--font-logo-k); font-weight: 800; transform: scaleX(-1); color: var(--papier); }
.logo-anol { font-family: var(--font-logo-mot); font-weight: 800; color: var(--nuit); -webkit-text-stroke: .8px var(--papier); paint-order: stroke fill; }

.bouton-ligne { border: 1px solid rgba(231,231,228,.3); border-radius: 4px; padding: 9px 14px; font-size: 13.5px; font-weight: 500; color: var(--papier); }
.bouton-ligne:hover { border-color: var(--papier); background: rgba(231,231,228,.06); }

/* Le bloc-notes ligné, motif maison. Lignes décalées pour passer sous la ligne de base. */
.notes {
  background-color: var(--papier);
  color: var(--encre);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(var(--interligne-notes) - 1px), rgba(17,17,17,.1) calc(var(--interligne-notes) - 1px) var(--interligne-notes));
  background-position: 0 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}

/* ---------- En-tête de page ---------- */
.entete { max-width: var(--largeur); margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }

/* ---------- Landing : le héros ---------- */
.heros { max-width: var(--largeur); margin: 0 auto; padding: 64px 24px 80px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 48px; align-items: center; }
.heros-monogramme { display: flex; justify-content: center; }
.monogramme { position: relative; width: min(100%, 380px); aspect-ratio: 1; display: grid; place-items: center; }
.monogramme svg { grid-area: 1 / 1; width: 100%; height: 100%; overflow: visible; }
.monogramme .logo-k { grid-area: 1 / 1; font-size: min(64vw, 250px); line-height: 1; text-box: trim-both cap alphabetic; -webkit-text-stroke: 3px var(--nuit); paint-order: stroke fill; }
.heros .etiquette { margin-bottom: 18px; }
.heros h1 { margin: 0 0 22px; font-family: var(--font-lecture); font-weight: 300; font-size: clamp(34px, 4.6vw, 52px); line-height: 1.08; letter-spacing: -.015em; text-wrap: pretty; }
.heros-chapo { margin: 0 0 30px; font-family: var(--font-lecture); font-size: 19px; line-height: 1.55; color: var(--gris-clair); text-wrap: pretty; max-width: 520px; }
.heros .manuscrit { margin: 0; font-size: 48px; color: var(--papier); }

/* ---------- Landing : ce qui se construit ---------- */
.construction { border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.construction-inner { max-width: var(--largeur); margin: 0 auto; padding: 64px 24px; }
.construction .etiquette { margin-bottom: 32px; }
.blocs { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1px; background: var(--trait-moyen); }
.bloc { background: var(--nuit); padding: 28px 28px 32px; }
.bloc-n { margin: 0 0 14px; font-family: var(--font-mono); font-size: 12px; color: var(--gris); }
.bloc h3 { margin: 0 0 12px; font-family: var(--font-lecture); font-weight: 600; font-size: 22px; line-height: 1.25; }
.bloc p { margin: 0; font-family: var(--font-lecture); font-size: 16px; line-height: 1.6; color: var(--gris-clair); text-wrap: pretty; }

/* ---------- Landing : petites nouvelles ---------- */
.nouvelles { max-width: var(--largeur); margin: 0 auto; padding: 64px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 48px; }
.nouvelles .etiquette { margin-bottom: 14px; }
.nouvelles-chapo { margin: 0; font-family: var(--font-lecture); font-size: 17px; line-height: 1.55; color: var(--gris-clair); max-width: 360px; }
.nouvelles-liste { padding: 22px 26px 18px; }
.nouvelle { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: baseline; }
.nouvelle-date { font-family: var(--font-mono); font-size: 11.5px; color: var(--gris-encre); line-height: var(--interligne-notes); }
.nouvelle p { margin: 0; font-family: var(--font-lecture); font-size: 16px; line-height: var(--interligne-notes); }

/* ---------- Landing : l'appel ---------- */
.appel { background: var(--papier); color: var(--encre); }
.appel-inner { max-width: var(--largeur); margin: 0 auto; padding: 72px 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.appel .etiquette { margin-bottom: 14px; color: var(--gris-encre); }
.appel h2 { margin: 0 0 18px; font-family: var(--font-lecture); font-weight: 400; font-size: clamp(30px, 3.6vw, 42px); line-height: 1.1; letter-spacing: -.01em; }
.appel-chapo { margin: 0; font-family: var(--font-lecture); font-size: 18px; line-height: 1.55; color: var(--gris-encre-fort); max-width: 520px; text-wrap: pretty; }
.appel-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.bouton-appel { border: none; background: var(--encre); color: var(--papier); padding: 18px 28px; border-radius: 4px; font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 12px; }
.bouton-appel:hover { background: var(--nuit); box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.bouton-appel span { font-family: var(--font-mono); font-size: 13px; opacity: .7; }
.appel-mention { margin: 0; font-family: var(--font-mono); font-size: 11.5px; color: var(--gris-encre); }

/* ---------- Pied de page ---------- */
.pied { max-width: var(--largeur); margin: 0 auto; padding: 28px 24px 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; font-family: var(--font-mono); font-size: 11.5px; color: var(--gris); }
.pied-liens { display: flex; gap: 22px; }
.pied a { color: var(--gris); border-color: rgba(154,154,150,.4); }

/* ---------- Page Raconter ---------- */
.page-raconter { background: var(--nuit); min-height: 100vh; display: flex; flex-direction: column; }
.raconter-entete { padding: 20px 32px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--trait); }
.raconter-entete .logo { font-size: 20px; }
.raconter-entete-mention { font-family: var(--font-mono); font-size: 11px; color: var(--gris); }
.raconter-corps { flex: 1; padding: 48px 32px 56px; max-width: 720px; width: 100%; margin: 0 auto; }
.raconter-corps .etiquette { margin-bottom: 14px; }
.raconter-corps h1 { margin: 0 0 18px; font-family: var(--font-lecture); font-weight: 300; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -.015em; text-wrap: pretty; }
.raconter-chapo { margin: 0 0 36px; font-family: var(--font-lecture); font-size: 18px; line-height: 1.55; color: var(--gris-clair); text-wrap: pretty; }

.cadre { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--trait-moyen); margin-bottom: 40px; }
.cadre-item { background: var(--nuit); padding: 16px 18px; display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 12px; align-items: start; }
.cadre-item span { width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--papier); }
.cadre-item p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--papier); }

.formulaire { display: grid; gap: 22px; }
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.champ { display: grid; gap: 8px; }
.champ > span { font-size: 13px; font-weight: 500; }
.champ .facultatif { color: var(--gris); font-weight: 400; }
.champ input { all: unset; box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid var(--trait-fort); border-radius: 4px; font-family: var(--font-corps); font-size: 15px; color: var(--papier); }
.champ input:focus { border-color: var(--papier); }

.anecdote { display: grid; gap: 10px; }
.anecdote-titre { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.anecdote-titre > span:first-child { font-size: 13px; font-weight: 500; }
.anecdote-aide { font-family: var(--font-mono); font-size: 11px; color: var(--gris); }
.anecdote-boite { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 14px 18px 14px 22px; align-items: start; }
.anecdote-boite textarea { all: unset; width: 100%; min-height: 196px; resize: vertical; font-family: var(--font-lecture); font-size: 16px; line-height: var(--interligne-notes); color: var(--encre); box-sizing: border-box; background: transparent; }
.micro-zone { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 6px; }
.micro { all: unset; cursor: pointer; position: relative; width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--encre); color: var(--papier); border: 1.5px solid var(--encre); box-sizing: border-box; }
.micro:hover { box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.micro.dictee { background: var(--papier); color: var(--encre); }
.micro-onde { position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--encre); animation: kanolPulse 1.4s ease-out infinite; }
@keyframes kanolPulse { 0%, 100% { transform: scale(1); opacity: .5 } 50% { transform: scale(1.35); opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .micro-onde { animation: none; opacity: .5 } }
.micro-libelle { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--gris-encre); text-align: center; white-space: nowrap; }
.anecdote-erreur { margin: 0; font-family: var(--font-mono); font-size: 12px; color: var(--papier); padding: 10px 14px; border: 1px solid rgba(231,231,228,.35); border-radius: 4px; }

.consentements { display: grid; gap: 12px; padding: 18px 0 6px; border-top: 1px solid var(--trait-moyen); }
.consentement { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; cursor: pointer; }
.consentement input { width: 20px; height: 20px; margin: 0; accent-color: var(--papier); }
.consentement span { font-size: 14px; line-height: 1.5; }
.consentement .precision { color: var(--gris); }

.envoi { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.bouton-envoi { all: unset; cursor: pointer; padding: 16px 26px; border-radius: 4px; background: var(--papier); color: var(--encre); font-size: 15px; font-weight: 600; }
.bouton-envoi:hover { background: #FFFFFF; }
.bouton-envoi[disabled] { cursor: not-allowed; background: rgba(231,231,228,.25); color: var(--nuit); }
.bouton-envoi[disabled]:hover { background: rgba(231,231,228,.25); }
.envoi-aide { font-family: var(--font-mono); font-size: 11px; color: var(--gris); }

/* L'état merci */
.merci { padding: 24px 0; }
.merci h1 { margin: 0 0 18px; font-family: var(--font-lecture); font-weight: 300; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -.015em; }
.merci-chapo { margin: 0 0 36px; font-family: var(--font-lecture); font-size: 18px; line-height: 1.55; color: var(--gris-clair); max-width: 560px; text-wrap: pretty; }
.suite { display: grid; border-top: 1px solid rgba(231,231,228,.15); max-width: 560px; }
.suite-etape { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--trait-moyen); }
.suite-etape span { font-family: var(--font-mono); font-size: 18px; color: var(--gris-encre); }
.suite-etape p { margin: 0; font-family: var(--font-lecture); font-size: 16.5px; line-height: 1.55; }
.merci .manuscrit { margin: 36px 0 0; font-size: 40px; }
.merci-reprise { margin-top: 28px; }
.lien-sobre { all: unset; cursor: pointer; font-size: 13.5px; color: var(--gris); border-bottom: 1px solid rgba(154,154,150,.5); }
.lien-sobre:hover { color: var(--papier); }

.raconter-pied { padding: 18px 32px; border-top: 1px solid var(--trait); font-family: var(--font-mono); font-size: 11px; color: var(--gris); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.raconter-pied a { color: var(--gris); border-color: rgba(154,154,150,.4); }

/* ---------- Téléphone ---------- */
@media (max-width: 720px) {
  .heros { padding: 40px 20px 56px; gap: 32px; }
  .monogramme { width: min(100%, 260px); }
  .construction-inner, .nouvelles, .appel-inner { padding-left: 20px; padding-right: 20px; }
  .construction-inner, .nouvelles { padding-top: 48px; padding-bottom: 48px; }
  .appel-inner { padding-top: 56px; padding-bottom: 56px; }
  .nouvelle { grid-template-columns: 64px minmax(0, 1fr); gap: 10px; }
  .entete, .pied { padding-left: 20px; padding-right: 20px; }
  .raconter-entete, .raconter-pied { padding-left: 20px; padding-right: 20px; }
  .raconter-corps { padding: 32px 20px 48px; }
  .anecdote-boite { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 14px 18px; }
  .micro-zone { flex-direction: row; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 0; }
  .micro-libelle { white-space: normal; text-align: right; }
}

/* ---------- Pages légales ---------- */
.page-legale { background: var(--nuit); min-height: 100vh; display: flex; flex-direction: column; }
.legale-corps { flex: 1; max-width: 760px; width: 100%; margin: 0 auto; padding: 56px 32px 72px; }
.legale-corps h1 { margin: 0 0 8px; font-family: var(--font-lecture); font-weight: 300; font-size: clamp(32px, 4vw, 44px); line-height: 1.1; letter-spacing: -.015em; }
.legale-maj { margin: 0 0 44px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--gris); }
.legale-corps h2 { margin: 44px 0 14px; font-family: var(--font-lecture); font-weight: 600; font-size: 22px; line-height: 1.25; }
.legale-corps h2:first-of-type { margin-top: 0; }
.legale-corps p { margin: 0 0 16px; font-family: var(--font-lecture); font-size: 16.5px; line-height: 1.65; color: var(--gris-clair); text-wrap: pretty; }
.legale-corps ul { margin: 0 0 16px; padding-left: 20px; }
.legale-corps li { margin-bottom: 8px; font-family: var(--font-lecture); font-size: 16.5px; line-height: 1.65; color: var(--gris-clair); }
.legale-corps strong { color: var(--papier); font-weight: 600; }
.legale-corps a { color: var(--papier); }
.legale-retour { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--trait-moyen); }
.legale-retour a { font-family: var(--font-mono); font-size: 12px; color: var(--gris); border-color: rgba(154,154,150,.4); }

@media (max-width: 720px) {
  .legale-corps { padding: 36px 20px 56px; }
}

/* La mention d'information et la consigne sur les tiers, textes du poste Juridique */
.mention-donnees { margin: 0 0 6px; font-size: 12.5px; line-height: 1.55; color: var(--gris); }
.consentement-lien { margin: 4px 0 0; font-size: 12.5px; }
.consentement-lien a { color: var(--gris); border-color: rgba(154,154,150,.4); }
.consigne-tiers { margin: 0 0 4px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.5; color: var(--papier); padding: 9px 12px; border: 1px solid var(--trait-fort); border-radius: 4px; }

/* Page de retrait du consentement */
.retrait-actions { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin: 28px 0 12px; }
.retrait-actions .bouton-envoi { background: var(--papier); color: var(--encre); }

/* ---------- Le logo d'en-tête : les vagues sous le K ----------
   Décision du Designer du 11/09/2026 : deux vagues au lieu de trois, opacité montée à 0,6,
   rendu à 30 px et non 22, vagues sous le seul K, « anol » net.
   Un écart assumé sur son chiffre : il demandait un trait de 4,5 dans un cadre de 160, ce qui
   donne 0,84 px à cette taille, donc encore trop fin. J'emploie la même mécanique que son
   monogramme du héros, un trait qui ne se met pas à l'échelle, réglé à 1,2 px à l'écran. */
.logo { font-size: 30px; }
.logo-monogramme { position: relative; display: inline-grid; place-items: center; }
.logo-vagues { position: absolute; top: 50%; left: 50%; width: 190%; height: 150%; transform: translate(-50%, -50%); overflow: visible; pointer-events: none; }
.logo-monogramme .logo-k { position: relative; }
.raconter-entete .logo { font-size: 26px; }

/* La consigne de dictée, quand elle est active : lisible, pas un murmure gris. */
.anecdote-aide-active { color: var(--papier); }

/* L'explication sous un champ, quand il faut dire à quoi il sert */
.champ-aide { margin: 26px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--gris); align-self: center; }
@media (max-width: 720px) { .champ-aide { margin-top: 0; } }