:root {
  --bg: #f4f2ec;
  --fg: #17160f;
  --mute: #5c5a50;
  --line: #d9d5c9;
  --tint: #e9e5da;
  --field: #fffdf8;
  --acc: #24684a;
  --serif: Charter, 'Bitstream Charter', 'Iowan Old Style', 'Sitka Text', Cambria, Georgia, 'Noto Serif', serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Roboto Mono', 'Noto Sans Mono', monospace;
  --ui: system-ui, -apple-system, 'Segoe UI', Roboto, 'Noto Sans', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #131412;
    --fg: #ebe9e2;
    --mute: #a4a198;
    --line: #30322d;
    --tint: #1c1e1a;
    --field: #0c0d0b;
    --acc: #8dd3a9;
  }
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  overflow-x: hidden;
}

a {
  color: var(--fg);
  text-decoration-color: var(--acc);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--acc);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

::selection {
  background: var(--acc);
  color: var(--bg);
}

.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

/* En-tête */

.entete {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 13px;
}

.entete a {
  text-decoration: none;
  color: var(--fg);
}

.entete .marque {
  font-weight: 600;
}

.entete nav {
  display: flex;
  gap: 4px;
}

.entete nav a {
  padding: 8px 10px;
  border-bottom: 2px solid transparent;
}

.entete nav a[aria-current='page'] {
  border-bottom-color: var(--acc);
}

/* L'outil */

.outil {
  padding: 22px 0 0;
}

h1 {
  margin: 0 0 16px;
  font-size: clamp(22px, 4.6vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 700;
  text-wrap: balance;
}

.outil label {
  display: block;
  margin-bottom: 6px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--mute);
}

.outil textarea {
  display: block;
  width: 100%;
  min-height: 108px;
  padding: 14px 16px;
  border: 2px solid var(--fg);
  border-radius: 0;
  background: var(--field);
  color: var(--fg);
  caret-color: var(--acc);
  font-family: var(--serif);
  font-size: clamp(22px, 4.4vw, 26px);
  line-height: 1.3;
  resize: vertical;
  outline: none;
}

.outil textarea::placeholder {
  color: var(--mute);
  opacity: 1;
}

.outil textarea:focus {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--acc);
}

.chapeau {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--mute);
  text-wrap: pretty;
}

.avis-accents {
  margin: 10px 0 0;
  padding-left: 10px;
  border-left: 2px solid var(--acc);
  font-size: 15px;
  line-height: 1.5;
}

.resultats {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  border-top: 1px solid var(--fg);
}

.resultat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 92px;
  align-items: center;
  gap: 6px 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}

.resultat .texte {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.resultat .nom {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--mute);
}

.resultat .apercu {
  font-family: var(--ui);
  font-size: clamp(20px, 4.6vw, 24px);
  line-height: 1.3;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.resultat .apercu.exemple {
  color: var(--mute);
}

.resultat .avertissement {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--mute);
}

.resultat button {
  width: 92px;
  height: 44px;
  border: 1.5px solid var(--fg);
  border-radius: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  cursor: pointer;
}

.resultat button.copie {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--bg);
}

.resultat button:disabled {
  opacity: 0.4;
  cursor: default;
}

.partout {
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--mute);
  text-wrap: pretty;
}

.visuellement-cache {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Extension. Sur ordinateur, elle a sa colonne à droite de l'outil : visible
   dès l'arrivée, sans suivre le défilement. Sur téléphone, où elle ne
   s'installe pas, une phrase après les résultats. Tout est masqué en CSS
   seulement, pour que la page indexée garde les deux versions. */

.extension {
  display: none;
}

.extension-courte {
  margin: 24px 0 0;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  line-height: 1.55;
}

.boutons-extension {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.boutons-extension a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 10px;
  border: 1.5px solid var(--fg);
  text-decoration: none;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--fg);
}

.boutons-extension a:first-child {
  background: var(--fg);
  color: var(--bg);
}

.boutons-extension a:hover {
  background: var(--acc);
  border-color: var(--acc);
  color: var(--bg);
}

@media (min-width: 700px) {
  .page {
    max-width: 1000px;
  }

  main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(236px, 26vw, 272px);
    column-gap: clamp(24px, 4vw, 48px);
    align-items: start;
  }

  main > * {
    grid-column: 1;
  }

  .extension {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 22px;
    padding: 20px;
    background: var(--tint);
    border-top: 3px solid var(--acc);
  }

  .extension h2 {
    margin: 0;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
  }

  .extension .corps {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 15px;
    line-height: 1.55;
  }

  .extension .corps p {
    margin: 0;
    text-wrap: pretty;
  }

  .extension .note {
    font-size: 13px;
    color: var(--mute);
  }

  .extension-courte {
    display: none;
  }
}

/* Explications repliables */

.plis {
  margin-top: 48px;
  border-top: 1px solid var(--fg);
}

.plis details {
  border-bottom: 1px solid var(--line);
}

.plis summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: center;
  gap: 12px;
  padding: 18px 0;
  list-style: none;
  cursor: pointer;
}

.plis summary::-webkit-details-marker {
  display: none;
}

.plis summary h2 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  font-weight: 700;
}

.plis summary::after {
  content: '+';
  font-family: var(--mono);
  font-size: 22px;
  color: var(--acc);
  text-align: center;
  transition: transform 0.2s;
}

.plis details[open] > summary::after {
  transform: rotate(45deg);
}

.plis .contenu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0 0 22px;
  font-size: 17px;
  line-height: 1.65;
}

.plis .contenu p {
  margin: 0;
  text-wrap: pretty;
}

.plis ul.contenu {
  gap: 12px;
  padding-left: 20px;
}

.plis .source {
  font-size: 14px;
  line-height: 1.55;
  color: var(--mute);
}

footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 56px;
  padding: 18px 0 32px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: var(--mute);
}

footer p {
  margin: 0;
}