/* ==========================================================================
   CORE — SEO
   --------------------------------------------------------------------------
   Charte de Core : violet #6355e0 unique accent, lavande, Lexend Deca.
   Les jetons viennent de site/src/styles/01-tokens.css de core-agency.be.
   ⚠️ UN SEUL ACCENT, ET IL TIENT TOUTE LA PAGE. Le vert, l'ambre et le rouge
   des contrôles y échappent parce qu'ils portent une GRAVITÉ, et non une
   décoration. Les aperçus, eux, imitent Google et Facebook : leurs couleurs
   sont des citations, pas la charte.
   ========================================================================== */

@font-face {
  font-family: 'Lexend Deca';
  src: url('../fonts/lexend-deca-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lexend Deca';
  src: url('../fonts/lexend-deca-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800; font-style: normal; font-display: swap;
}

[hidden] { display: none !important; }
*, *::before, *::after { box-sizing: border-box; }

:root {
  --papier: #F1EFFD;
  --carte:  #FFFFFF;
  --encre:  #0E0E12;
  --douce:  #6B6B7A;
  --filet:  rgba(14, 14, 18, .12);
  --accent: #6355E0;
  --accent-pale: #E7E3FB;
  --juste:  #0A7D5A;
  --juste-pale: #E4F4EE;
  --tiede:  #8A5A00;
  --tiede-pale: #FBF2E0;
  --faux:   #A33325;
  --faux-pale: #FBEAE7;
  --rayon:  10px;
  --ui: 'Lexend Deca', -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
  --chiffres: 'JetBrains Mono', ui-monospace, Consolas, monospace;
}

body {
  margin: 0;
  font-family: var(--ui);
  font-size: 15px; line-height: 1.55;
  color: var(--encre); background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

.entete { max-width: 1080px; margin: 0 auto; padding: 2rem 1.5rem 0; }
.entete__marque { display: flex; align-items: center; gap: .8rem; }
.signe { display: block; border-radius: 7px; }
.entete h1 { margin: 0; font-size: 1.28rem; font-weight: 700; letter-spacing: -.02em; }
.entete p { margin: .1rem 0 0; font-size: .87rem; color: var(--douce); }
.entete__lien { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
.entete__lien:hover { color: var(--encre); }
.entete__tiret { color: var(--accent); }

.page { max-width: 1080px; margin: 0 auto; padding: 1.6rem 1.5rem 3rem; }

.atelier { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.2rem; align-items: start; }
@media (max-width: 900px) { .atelier { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------- OUTILS */

.outil {
  margin-bottom: 1.2rem; padding: 1.4rem;
  background: var(--carte);
  border: 1px solid var(--filet); border-radius: var(--rayon);
}
.outil:last-child { margin-bottom: 0; }
.outil__titre { margin: 0 0 .3rem; font-size: 1.02rem; font-weight: 700; letter-spacing: -.01em; }
.outil__intro { margin: 0 0 1.1rem; font-size: .86rem; line-height: 1.5; color: var(--douce); max-width: 62ch; }
.outil__intro code {
  padding: .05rem .3rem; font-family: var(--chiffres); font-size: .82em;
  background: var(--accent-pale); border-radius: 4px;
}

.rangee { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.rangee:last-child { margin-bottom: 0; }
.champ { display: block; min-width: 0; }
.champ--large { grid-column: 1 / -1; }
.champ__nom { display: block; margin-bottom: .35rem; font-size: .78rem; font-weight: 600; color: var(--douce); }
.champ__aide { display: block; margin-top: .25rem; font-size: .73rem; line-height: 1.45; color: var(--douce); }

.saisie {
  width: 100%; padding: .55rem .7rem;
  font: inherit; font-size: .9rem;
  color: var(--encre); background: var(--papier);
  border: 1px solid var(--filet); border-radius: 7px;
}
.saisie:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
textarea.saisie { resize: vertical; min-height: 4.5rem; }

.bouton {
  padding: .55rem .9rem; font: inherit; font-size: .84rem; font-weight: 550;
  border-radius: 7px; border: 1px solid var(--filet); cursor: pointer; white-space: nowrap;
}
.bouton--discret { color: var(--encre); background: var(--papier); }
.bouton--discret:hover { border-color: var(--accent); color: var(--accent); }
.bouton--plein { color: #fff; background: var(--accent); border-color: var(--accent); }
.bouton--plein:hover { background: #5245c9; }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --------------------------------------------------------- JAUGE */

.mesure { display: flex; align-items: center; gap: .5rem; margin-top: .35rem; }
.mesure__barre { flex: 1; height: 4px; background: var(--accent-pale); border-radius: 999px; overflow: hidden; }
.mesure__part { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.mesure__part--trop { background: var(--faux); }
.mesure__texte { font-family: var(--chiffres); font-size: .7rem; color: var(--douce); white-space: nowrap; }

/* --------------------------------------------------------- HORAIRES */

.horaires { display: grid; gap: .45rem; }
.jour {
  display: grid;
  grid-template-columns: 5.5rem auto 1fr;
  align-items: center; gap: .5rem;
  padding: .35rem .5rem;
  background: var(--papier); border-radius: 8px;
}
.jour__nom { font-size: .82rem; font-weight: 600; }
.jour__ferme { display: flex; align-items: center; gap: .3rem; font-size: .75rem; color: var(--douce); }
.jour__plages { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.jour__plages .saisie { width: 5.4rem; padding: .3rem .4rem; font-family: var(--chiffres); font-size: .8rem; }
.jour__sep { font-size: .78rem; color: var(--douce); }
.jour--ferme .jour__plages { opacity: .35; pointer-events: none; }
@media (max-width: 620px) {
  .jour { grid-template-columns: 1fr; gap: .3rem; }
}

/* --------------------------------------------------------- APERÇUS */

.colonne--droite { position: sticky; top: 1.2rem; }
@media (max-width: 900px) { .colonne--droite { position: static; } }

.apercu__etiquette {
  margin: 0 0 .5rem; font-size: .7rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--douce);
}

/* Aperçu du résultat de recherche. Les couleurs et la police citent
   Google : elles doivent être fidèles pour que l'aperçu serve à quelque
   chose, et n'ont donc rien à voir avec la charte. */
.serp {
  padding: .9rem 1rem;
  background: #fff; border: 1px solid var(--filet); border-radius: 8px;
  font-family: arial, sans-serif;
}
.serp__fil { display: flex; align-items: center; gap: .45rem; margin-bottom: .25rem; }
.serp__rond {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #f1f3f4; font-size: .6rem; color: #5f6368; overflow: hidden;
}
.serp__rond img { width: 100%; height: 100%; object-fit: cover; }
.serp__site { font-size: 14px; line-height: 1.2; color: #202124; }
.serp__url { font-size: 12px; color: #4d5156; word-break: break-all; }
.serp__titre {
  margin: 0 0 .1rem; font-size: 20px; line-height: 1.3;
  font-weight: 400; color: #1a0dab;
}
.serp__titre--coupe::after { content: " …"; color: #70757a; }
.serp__desc { margin: 0; font-size: 14px; line-height: 1.58; color: #4d5156; }
.serp__horaires { margin: .35rem 0 0; font-size: 14px; color: #4d5156; }
.serp__ouvert { color: #0d652d; font-weight: 700; }
.serp__ferme { color: #c5221f; font-weight: 700; }

/* Aperçu du partage. */
.carte-partage {
  overflow: hidden;
  background: #fff; border: 1px solid var(--filet); border-radius: 8px;
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
}
.carte-partage__image {
  display: grid; place-items: center;
  aspect-ratio: 1200 / 630;
  background: #E4E6EB; color: #8A8D91;
  font-size: .74rem; text-align: center;
}
.carte-partage__image img { width: 100%; height: 100%; object-fit: cover; }
.carte-partage__texte { padding: .6rem .75rem; background: #F2F3F5; }
.carte-partage__hote { font-size: .68rem; text-transform: uppercase; color: #65676B; }
.carte-partage__titre {
  margin: .1rem 0 .1rem; font-size: .88rem; font-weight: 700; line-height: 1.3; color: #050505;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.carte-partage__desc {
  margin: 0; font-size: .76rem; line-height: 1.35; color: #65676B;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* --------------------------------------------------------- CONTRÔLES */

.controles { margin: 0; padding: 0; list-style: none; display: grid; gap: .4rem; }
.controle {
  display: grid; grid-template-columns: auto 1fr; gap: .55rem;
  padding: .55rem .7rem;
  font-size: .8rem; line-height: 1.45;
  border-radius: 8px;
}
.controle--bloquant { color: var(--faux); background: var(--faux-pale); }
.controle--important { color: var(--tiede); background: var(--tiede-pale); }
.controle--remarque { color: var(--douce); background: var(--papier); }
.controle__pastille {
  align-self: start; margin-top: .35rem;
  width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.controle--aucun { color: var(--juste); background: var(--juste-pale); }

/* --------------------------------------------------------- SORTIE */

.sortie__barre {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  margin-bottom: .6rem;
}
.sortie__barre .bouton { flex: 0 0 auto; }
.sortie__etat { font-size: .76rem; color: var(--juste); }

.code {
  margin: 0; padding: .9rem 1rem;
  max-height: 26rem; overflow: auto;
  font-family: var(--chiffres); font-size: .74rem; line-height: 1.6;
  color: #E9E6FB; background: #17151F;
  border-radius: 8px;
  white-space: pre; tab-size: 2;
}
.code::-webkit-scrollbar { width: 10px; height: 10px; }
.code::-webkit-scrollbar-thumb { background: #3A3550; border-radius: 999px; }

.note { margin: .6rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--douce); max-width: 68ch; }
.note a { color: var(--accent); }
.filet { margin: 1.2rem 0; border: none; border-top: 1px solid var(--filet); }

.avertissement {
  margin: .8rem 0 0; padding: .65rem .9rem;
  font-size: .8rem; line-height: 1.5;
  color: var(--tiede); background: var(--tiede-pale);
  border-radius: 8px;
}
.avertissement strong { font-weight: 700; }

/* --------------------------------------------------------- PIED */

.pied { max-width: 1080px; margin: 0 auto; padding: 0 1.5rem 3rem; font-size: .8rem; color: var(--douce); }
.pied p { margin: 0 0 .5rem; max-width: 66ch; }
.pied a { color: var(--encre); }
.pied__avertissement {
  padding: .6rem .8rem; background: var(--carte);
  border-left: 2px solid var(--accent); border-radius: 0 6px 6px 0;
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ------------------------------------------------------------ FAMILLE
   Les sept outils de Core ne se connaissaient pas entre eux. Quelqu'un
   qui arrive ici par une recherche n'avait aucun moyen d'apprendre que
   les six autres existent — c'est le seul lien qui manquait. */
.famille {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .3rem .75rem;
  margin: 0 0 .7rem;
  padding-top: .8rem;
  border-top: 1px solid var(--filet);
  font-size: .78rem;
}
.famille__titre { font-weight: 600; color: var(--encre); }
.famille a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.famille a:hover { border-bottom-color: currentColor; }
.famille a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }