:root {
  --papier:        #edede7;
  --papier-creux:  #e3e3da;
  --encre:         #1a1c18;
  --sourdine:      #6c7066;
  --trait:         #cfd0c6;
  --grenat:        #7d1f2e;
  --grenat-vif:    #9a2d3d;

  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;

  --colonne: 34rem;
  --marge: 1.375rem;
}

* { box-sizing: border-box; }

/* sans ceci, un display: flex d'auteur l'emporte sur l'attribut hidden */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  padding: env(safe-area-inset-top, 0) 0 env(safe-area-inset-bottom, 0);
}

p { margin: 0 0 .75em; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--grenat);
  outline-offset: 3px;
  border-radius: 1px;
}

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

/* ---------------------------------------------------------- bandeau */

.bandeau {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 1.25rem var(--marge) .5rem;
}

.marque {
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: .02em;
  text-decoration: none;
}

.bandeau-liens {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--sourdine);
}
.bandeau-liens a { margin-left: 1rem; text-decoration: none; }
.bandeau-liens a:hover { color: var(--grenat); }

/* ---------------------------------------------------------- sections */

main { display: block; }

section {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 2.75rem var(--marge) 0;
}

section:last-of-type { padding-bottom: 3rem; }

h2 {
  font-family: var(--serif);
  font-size: 1.4375rem;
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 .35em;
  letter-spacing: -.005em;
}

.chapo {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--sourdine);
  margin-bottom: 1.5rem;
}

/* le seul motif structurel de la page : un trait grenat court */
.rule-haut,
.regle {
  display: block;
  width: 2.25rem;
  height: 3px;
  background: var(--grenat);
  margin: 0 0 1.25rem;
}

/* ---------------------------------------------------------- mot du jour */

.mot { padding-top: 1.75rem; }

.date {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--sourdine);
  margin-bottom: .9rem;
}

.vedette {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.6rem, 13vw, 5rem);
  line-height: .97;
  letter-spacing: -.02em;
  margin: 0 0 1.1rem;
  hyphens: auto;
  /* « anywhere » et non « break-word » : lui seul reduit la largeur minimale
     du bloc, sinon un mot long comme « subrepticement » elargit toute la page. */
  overflow-wrap: anywhere;
}

.mot .regle { margin-top: -.3rem; margin-bottom: 1.05rem; }

.nature {
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--sourdine);
  margin-bottom: .85rem;
}

.definition {
  font-size: 1.1875rem;
  line-height: 1.55;
  margin-bottom: 1.4rem;
}

.exemple {
  margin: 0 0 1.75rem;
  padding: .1rem 0 .1rem 1rem;
  border-left: 2px solid var(--trait);
}
.exemple p {
  font-style: italic;
  color: #3c4038;
  margin: 0;
}

.notes {
  display: grid;
  gap: 1.15rem;
  border-top: 1px solid var(--trait);
  padding-top: 1.25rem;
}
.note p:last-child { margin-bottom: 0; }

.note-titre {
  font-family: var(--sans);
  font-size: .75rem;
  letter-spacing: .04em;
  color: var(--sourdine);
  margin-bottom: .25rem;
}

.note p:not(.note-titre) { font-size: .9875rem; }

.note-piege {
  background: var(--papier-creux);
  border-left: 3px solid var(--grenat);
  padding: .75rem .9rem;
}
.note-piege .note-titre { color: var(--grenat); }

/* ---------------------------------------------------------- champs email */

.champ {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.champ input {
  flex: 1 1 12rem;
  min-width: 0;
  font-family: var(--sans);
  font-size: 1rem;
  padding: .7rem .8rem;
  color: var(--encre);
  background: #f6f6f2;
  border: 1px solid var(--trait);
  border-radius: 2px;
}
.champ input::placeholder { color: #9b9e93; }
.champ input[aria-invalid="true"] { border-color: var(--grenat); }

.bouton {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 500;
  padding: .7rem 1.1rem;
  color: var(--papier);
  background: var(--grenat);
  border: 1px solid var(--grenat);
  border-radius: 2px;
  cursor: pointer;
}
.bouton:hover { background: var(--grenat-vif); border-color: var(--grenat-vif); }

.bouton-ligne {
  color: var(--grenat);
  background: transparent;
}
.bouton-ligne:hover { color: var(--papier); }

.mention {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--sourdine);
  margin: .6rem 0 0;
}
.mention.fait { color: var(--grenat); }

/* ---------------------------------------------------------- quiz */

.quiz-def {
  font-size: 1.0625rem;
  padding: .95rem 1.05rem;
  background: var(--papier-creux);
  margin-bottom: 1.1rem;
}

.choix { display: grid; gap: .5rem; }

.choix button {
  font-family: var(--serif);
  font-size: 1.0625rem;
  text-align: left;
  padding: .7rem .85rem;
  color: var(--encre);
  background: transparent;
  border: 1px solid var(--trait);
  border-radius: 2px;
  cursor: pointer;
}
.choix button:hover:not(:disabled) { border-color: var(--encre); }
.choix button:disabled { cursor: default; }
.choix button.juste {
  border-color: var(--grenat);
  background: var(--grenat);
  color: var(--papier);
}
.choix button.faux { opacity: .45; text-decoration: line-through; }

.quiz-retour {
  font-family: var(--sans);
  font-size: .9375rem;
  margin-top: .9rem;
}

.quiz-fiche {
  margin-top: 1rem;
  border-top: 1px solid var(--trait);
  padding-top: 1rem;
}
.quiz-fiche p { font-size: .9875rem; }
.quiz-fiche .quiz-fiche-mot {
  font-size: 1.375rem;
  font-weight: 600;
  margin-bottom: .1rem;
}
.quiz-fiche .quiz-fiche-nature {
  font-style: italic;
  color: var(--sourdine);
  margin-bottom: .55rem;
}

/* ---------------------------------------------------------- listes */

.liste { list-style: none; margin: 0; padding: 0; }

.liste li { border-top: 1px solid var(--trait); }
.liste li:last-child { border-bottom: 1px solid var(--trait); }

.liste details > summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 0;
  cursor: pointer;
  list-style: none;
}
.liste details > summary::-webkit-details-marker { display: none; }

.liste-mot { font-size: 1.0625rem; }
.liste-jour {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--sourdine);
  white-space: nowrap;
}
.liste-corps { padding: 0 0 1rem; }
.liste-corps p { font-size: .9875rem; }
.liste-corps .liste-nature { font-style: italic; color: var(--sourdine); margin-bottom: .4rem; }
.liste-corps .liste-exemple { font-style: italic; color: #3c4038; }

/* ---------------------------------------------------------- verrou */

.verrou { padding-top: 2rem; }

.liste-masquee { margin-bottom: 1.1rem; }
.liste-masquee li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 0;
}
.barre {
  display: inline-block;
  height: .7rem;
  background: var(--trait);
  border-radius: 1px;
}

.verrou-texte {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--sourdine);
  margin-bottom: 1rem;
}

/* ---------------------------------------------------------- premium */

.inclus {
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.inclus li {
  font-size: 1rem;
  padding: .55rem 0 .55rem 1.1rem;
  border-bottom: 1px solid var(--trait);
  position: relative;
}
.inclus li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.08rem;
  width: .4rem; height: .4rem;
  background: var(--grenat);
}
.inclus span { color: var(--sourdine); }

/* ce qu'on vend, dit avant les prix */
.vend {
  margin: 0 0 1.5rem;
  padding: .1rem 0 .1rem 1rem;
  border-left: 3px solid var(--grenat);
}

.offres { display: grid; gap: 1.25rem; }

.offre {
  border: 1px solid var(--trait);
  padding: 1.15rem 1.15rem 1.25rem;
}
.offre:first-child { border-color: var(--encre); }

.offre-nom {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--sourdine);
  margin-bottom: .1rem;
}
.offre-prix {
  font-size: 2.5rem;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: .15rem;
}
.offre-prix span { font-weight: 600; }
.offre-detail {
  font-family: var(--sans);
  font-size: .875rem;
  color: var(--sourdine);
  margin-bottom: 1rem;
}
.offre .bouton { width: 100%; }

/* ---------------------------------------------------------- pied */

.pied {
  max-width: var(--colonne);
  margin: 0 auto;
  padding: 2rem var(--marge) 3rem;
  border-top: 1px solid var(--trait);
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--sourdine);
}
.pied p { margin-bottom: .55rem; }
.pied a { color: var(--sourdine); }
.pied a:hover { color: var(--grenat); }

.lien {
  font: inherit;
  color: var(--grenat);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* ---------------------------------------------------------- sas */

dialog {
  width: min(28rem, calc(100vw - 2rem));
  padding: 1.5rem var(--marge) 1.75rem;
  color: var(--encre);
  background: var(--papier);
  border: 1px solid var(--encre);
  border-radius: 2px;
}
dialog::backdrop { background: rgba(26, 28, 24, .45); }
dialog p { font-family: var(--sans); font-size: .9375rem; }
dialog h2 { margin-bottom: .5rem; }

.sas-fermer { display: flex; justify-content: flex-end; margin: -.5rem -.4rem .1rem 0; }
.sas-fermer button {
  font: 1.5rem/1 var(--sans);
  color: var(--sourdine);
  background: none;
  border: 0;
  padding: .5rem .7rem;
  cursor: pointer;
}

/* ---------------------------------------------------------- pages texte */

.texte { padding-top: 1.75rem; }
.texte h1 { font-size: 1.75rem; line-height: 1.2; margin: 0 0 1rem; }
.texte h2 { margin-top: 1.75rem; }
.texte p, .texte li { font-size: 1rem; }
.texte ul { padding-left: 1.1rem; }

/* ---------------------------------------------------------- large */

@media (min-width: 40rem) {
  body { font-size: 1.09375rem; }
  :root { --marge: 2rem; }
  .mot { padding-top: 2.5rem; }
  .notes { grid-template-columns: 1fr 1fr; gap: 1.25rem 2rem; }
  .note-piege { grid-column: 1 / -1; }
  .offres { grid-template-columns: 1fr 1fr; }
  .definition { font-size: 1.25rem; }
}

/* ---------------------------------------------------------- mouvement */

.vedette, .mot .regle, .nature, .definition {
  animation: monte .5s cubic-bezier(.2, .7, .3, 1) both;
}
.mot .regle { animation-delay: .06s; }
.nature { animation-delay: .1s; }
.definition { animation-delay: .14s; }

@keyframes monte {
  from { opacity: 0; transform: translateY(.5rem); }
  to   { opacity: 1; transform: none; }
}

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