/*
 * FLOUSE : feuille de style unique.
 *
 * Repères smolweb (smolweb.org/css-grading.html) :
 * - grades A et B pour l'essentiel ;
 * - grade C pour les variables de couleur, box-sizing, border-radius,
 *   overflow, content et background-size, parce qu'ils portent l'identité
 *   (palette, ticket de caisse) sans coût de calcul notable ;
 * - aucun flex, grid, float, position absolue, transform, animation ni
 *   transition. Les colonnes sont en inline-block et s'empilent sur mobile.
 * Le site reste entièrement lisible sans cette feuille.
 */

/* ---------- Palette ---------- */

:root {
  --papier: #EEF2EC;      /* fond des pages, vert de gris clair */
  --blanc: #FFFFFF;
  --encre: #16302B;       /* texte, vert sapin presque noir */
  --sapin: #1F4A3F;       /* grands aplats sombres */
  --sirop: #B8174F;       /* framboise des berlingots : prix, appels */
  --menthe: #A8DCC8;      /* encarts, survols */
  --gris: #4F625C;        /* texte secondaire */
  --ticket-fond: #FFFFFF;
  --ticket-encre: #1D2622;
}

/* ---------- Base ---------- */

html {
  font-size: 100%;
}

body {
  margin: 0;
  background-color: var(--papier);
  color: var(--encre);
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Cantarell, Calibri, "DejaVu Sans", "Source Sans Pro", sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}

* {
  box-sizing: border-box;
}

.cadre {
  max-width: 68rem;
  margin: 0 auto;
  padding: 0 1rem;
}

h1, h2, h3, .marque b, .pied-marque b {
  font-family: Bahnschrift, "DIN Alternate", "Nimbus Sans Narrow", "Arial Narrow", "Roboto Condensed", "DejaVu Sans Condensed", sans-serif;
  font-weight: bold;
  line-height: 1.1;
}

h1 {
  font-size: 2.75rem;
  margin: 2rem 0 1rem 0;
}

h2 {
  font-size: 1.8rem;
  margin: 2.5rem 0 0.8rem 0;
}

h3 {
  font-size: 1.35rem;
  margin: 1.5rem 0 0.5rem 0;
}

p, ul, ol, dl, blockquote, details {
  max-width: 42rem;
}

p {
  margin: 0 0 1rem 0;
}

ul, ol {
  margin: 0 0 1.2rem 0;
  padding-left: 1.4rem;
}

li {
  margin-bottom: 0.5rem;
}

a {
  color: var(--sirop);
  text-decoration: underline;
}

a:hover {
  color: var(--encre);
  background-color: var(--menthe);
}

a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus {
  outline: 3px solid var(--sirop);
}

img {
  max-width: 100%;
  height: auto;
}

blockquote {
  margin: 1.5rem 0;
  padding: 0 0 0 1.2rem;
  border-left: 6px solid var(--sirop);
  font-family: Bahnschrift, "DIN Alternate", "Nimbus Sans Narrow", "Arial Narrow", "Roboto Condensed", "DejaVu Sans Condensed", sans-serif;
  font-size: 1.6rem;
  line-height: 1.2;
  font-weight: bold;
}

blockquote p {
  margin: 0;
}

/* ---------- Lien d'évitement ---------- */

.evitement {
  margin: 0;
  max-width: none;
}

.evitement a {
  display: block;
  height: 0;
  overflow: hidden;
  background-color: var(--encre);
  color: var(--papier);
  text-align: center;
}

.evitement a:focus {
  height: auto;
  padding: 0.6rem;
}

/* ---------- En-tête et navigation ---------- */

.entete {
  padding: 1.2rem 0 0.6rem 0;
  border-bottom: 3px solid var(--encre);
}

.marque {
  margin: 0 0 0.8rem 0;
  max-width: none;
}

.marque a {
  color: var(--encre);
  text-decoration: none;
}

.marque a:hover {
  background-color: transparent;
}

.marque b {
  display: block;
  font-size: 3rem;
  line-height: 1;
}

.marque span {
  display: block;
  color: var(--gris);
  font-size: 0.95rem;
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
}

nav li {
  display: inline-block;
  margin: 0 0.2rem 0.5rem 0;
}

nav a {
  display: inline-block;
  padding: 0.4rem 0.9rem;
  border: 2px solid var(--encre);
  border-radius: 2rem;
  color: var(--encre);
  text-decoration: none;
}

nav a:hover {
  background-color: var(--menthe);
}

nav a[aria-current="page"] {
  background-color: var(--encre);
  color: var(--papier);
}

nav .nav-souscrire a {
  background-color: var(--sirop);
  border-color: var(--sirop);
  color: var(--blanc);
  font-weight: bold;
}

nav .nav-souscrire a:hover,
nav .nav-souscrire a[aria-current="page"] {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

main {
  padding-bottom: 3rem;
}

/* ---------- Boutons ---------- */

.boutons {
  margin: 1.5rem 0;
}

.bouton, button {
  display: inline-block;
  margin: 0 0.5rem 0.6rem 0;
  padding: 0.75rem 1.4rem;
  border: 3px solid var(--sirop);
  border-radius: 0.5rem;
  background-color: var(--sirop);
  color: var(--blanc);
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: bold;
  text-decoration: none;
  cursor: pointer;
}

.bouton:hover, button:hover {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--papier);
}

.bouton-second {
  background-color: transparent;
  color: var(--encre);
  border-color: var(--encre);
}

/* ---------- Colonnes (inline-block, empilées sur mobile) ---------- */

.colonnes {
  margin: 1.5rem 0;
}

.colonne {
  display: inline-block;
  vertical-align: top;
  width: 47%;
  margin-right: 4%;
}

.colonne + .colonne {
  margin-right: 0;
}

/* ---------- La une de l'accueil ---------- */

.bloc-une {
  margin: 2rem 0 1rem 0;
  padding: 2.5rem 2rem 1.5rem 2rem;
  border-radius: 1rem;
  background-color: var(--sapin);
  color: #EEF2EC;
}

.bloc-une .colonnes {
  margin: 0;
}

.bloc-une .colonne {
  width: 56%;
}

.bloc-une .colonne + .colonne {
  width: 38%;
}

.bloc-une h1 {
  margin-top: 0;
  font-size: 3.6rem;
  line-height: 1;
}

.bloc-une p {
  font-size: 1.2rem;
}

.bloc-une a:not(.bouton) {
  color: var(--menthe);
}

.bloc-une a:not(.bouton):hover {
  color: var(--encre);
}

.bloc-une .bouton {
  color: var(--blanc);
}

.bloc-une .bouton-second {
  border-color: #EEF2EC;
  color: #EEF2EC;
}

.bloc-une .bouton:hover {
  background-color: var(--papier);
  border-color: var(--papier);
  color: var(--encre);
}

.compteur {
  font-weight: bold;
}

/* ---------- Ticket de caisse ---------- */

.ticket {
  margin: 8px 0 1.5rem 0;
  padding: 20px 22px 16px 22px;
  max-width: 24rem;
  background-color: var(--ticket-fond);
  color: var(--ticket-encre);
  font-family: ui-monospace, "Cascadia Mono", "DejaVu Sans Mono", "Liberation Mono", Menlo, monospace;
  font-size: 0.95rem;
  line-height: 1.45;
}

.ticket::before, .ticket::after {
  content: "";
  display: block;
  height: 8px;
  background-repeat: repeat-x;
}

.ticket::before {
  margin: -28px -22px 14px -22px;
  background-image: url("img/dentelure.svg");
}

.ticket::after {
  margin: 12px -22px -24px -22px;
  background-image: url("img/dentelure-bas.svg");
}

.ticket table {
  width: 100%;
  border-collapse: collapse;
}

.ticket caption {
  padding: 0 0 0.6rem 0;
  border-bottom: 2px dashed var(--ticket-encre);
  font-weight: bold;
  text-align: center;
}

.ticket thead th {
  padding: 0.3rem 0;
  color: #5A6661;
  font-size: 0.8rem;
  font-weight: normal;
}

.ticket th, .ticket td {
  padding: 0.35rem 0;
  border-bottom: 1px dotted #9AA6A1;
  vertical-align: bottom;
}

.ticket th {
  text-align: left;
  font-weight: normal;
  padding-right: 0.6rem;
}

.ticket td {
  text-align: right;
  white-space: nowrap;
}

.ticket tfoot th, .ticket tfoot td {
  padding-top: 0.7rem;
  border-top: 3px double var(--ticket-encre);
  border-bottom: 0;
  font-size: 1.25rem;
  font-weight: bold;
}

.ticket tfoot td {
  color: #B8174F;
}

.ticket p {
  margin: 0.8rem 0 0 0;
  padding-top: 0.6rem;
  border-top: 2px dashed var(--ticket-encre);
  font-size: 0.85rem;
  text-align: center;
}

.ticket p + p {
  margin-top: 0;
  border-top: 0;
}

/* ---------- Portes d'entrée ---------- */

.portes {
  margin: 1rem 0 2rem 0;
}

.porte {
  display: inline-block;
  vertical-align: top;
  width: 47%;
  margin: 0 4% 1.8rem 0;
  padding-top: 0.6rem;
  border-top: 5px solid var(--encre);
}

.porte:nth-child(2n) {
  margin-right: 0;
}

.porte h3 {
  margin-top: 0.4rem;
  font-size: 1.6rem;
}

.porte p:last-child a {
  font-weight: bold;
}

/* ---------- Bandeau et encart ---------- */

.bloc-bandeau {
  margin: 2rem 0;
  padding: 2rem 2rem 1rem 2rem;
  border-radius: 1rem;
  background-color: var(--sirop);
  color: var(--blanc);
}

.bloc-bandeau h2 {
  margin-top: 0;
}

.bloc-bandeau blockquote {
  border-left-color: var(--blanc);
  font-size: 2rem;
}

.bloc-bandeau a:not(.bouton) {
  color: var(--blanc);
}

.bloc-bandeau .bouton {
  background-color: var(--blanc);
  border-color: var(--blanc);
  color: var(--sirop);
}

.bloc-bandeau .bouton:hover {
  background-color: var(--encre);
  border-color: var(--encre);
  color: var(--blanc);
}

.bloc-encart {
  margin: 2rem 0;
  padding: 1.5rem 1.8rem 0.6rem 1.8rem;
  border-radius: 1rem;
  background-color: var(--menthe);
  color: #16302B;
}

.bloc-encart h2 {
  margin-top: 0;
}

.bloc-encart a:not(.bouton) {
  color: #16302B;
}

/* ---------- Machines ---------- */

.machines {
  margin: 1.5rem 0 2rem 0;
}

.machine {
  display: inline-block;
  vertical-align: top;
  width: 31%;
  margin: 0 3% 1.5rem 0;
  padding: 1.2rem 1.2rem 0.4rem 1.2rem;
  border: 2px solid var(--encre);
  border-radius: 0.6rem;
  background-color: var(--blanc);
  color: #16302B;
}

.machine:nth-child(3n) {
  margin-right: 0;
}

.machine img {
  display: block;
  margin: 0 0 0.8rem 0;
  border-radius: 0.3rem;
}

.machine h3 {
  margin-top: 0.6rem;
}

.machine h3 small {
  display: block;
  margin-top: 0.2rem;
  color: #4F625C;
  font-size: 0.95rem;
  font-weight: normal;
}

.tampon {
  display: inline-block;
  margin: 0;
  padding: 0.1rem 0.6rem;
  border: 3px double #1F6B4A;
  border-radius: 0.3rem;
  color: #1F6B4A;
  font-weight: bold;
}

.machine-attente .tampon {
  border-color: #8A5A00;
  color: #8A5A00;
}

.machine-attente {
  border-style: dashed;
}

.exemple {
  margin: 0;
  color: #B8174F;
  font-size: 0.9rem;
}

.machine dl {
  margin: 0.8rem 0;
  font-size: 1rem;
}

.machine dt {
  color: #4F625C;
  font-size: 0.85rem;
}

.machine dd {
  margin: 0 0 0.4rem 0;
}

.tarif strong {
  color: #B8174F;
  font-size: 1.3rem;
}

.machine a:not(.bouton) {
  color: #B8174F;
}

.vide {
  padding: 1.2rem;
  border: 2px dashed var(--encre);
  border-radius: 0.6rem;
}

/* ---------- Nouvelles ---------- */

.nouvelles ul {
  list-style: none;
  padding: 0;
}

.nouvelles li {
  margin-bottom: 1.2rem;
  padding-left: 1rem;
  border-left: 4px solid var(--menthe);
}

.nouvelles time {
  display: block;
  color: var(--sirop);
  font-weight: bold;
}

.nouvelles li p {
  margin: 0.2rem 0 0 0;
}

/* ---------- Questions fréquentes ---------- */

details {
  margin: 0 0 0.8rem 0;
  padding: 0.8rem 1.2rem;
  border: 2px solid var(--encre);
  border-radius: 0.6rem;
  background-color: var(--blanc);
  color: #16302B;
}

details[open] {
  border-color: var(--sirop);
}

summary {
  cursor: pointer;
  font-weight: bold;
  font-size: 1.15rem;
}

details p {
  margin: 0.8rem 0 0.2rem 0;
}

/* ---------- Formulaires ---------- */

.formulaire {
  max-width: 42rem;
}

fieldset {
  margin: 0 0 1.5rem 0;
  padding: 1rem 1.4rem 1.2rem 1.4rem;
  border: 2px solid var(--encre);
  border-radius: 0.8rem;
  background-color: var(--blanc);
  color: #16302B;
}

legend {
  padding: 0.2rem 0.9rem;
  border-radius: 2rem;
  background-color: #16302B;
  color: #EEF2EC;
  font-weight: bold;
  font-size: 1.25rem;
}

label {
  display: block;
  margin: 0.9rem 0 0.3rem 0;
  font-weight: bold;
}

label.choix {
  margin: 0.6rem 0;
  font-weight: normal;
}

input, select, textarea {
  display: block;
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 2px solid #4F625C;
  border-radius: 0.4rem;
  background-color: #FFFFFF;
  color: #16302B;
  font-family: inherit;
  font-size: 1.1rem;
}

input[type="radio"], input[type="checkbox"] {
  display: inline-block;
  width: auto;
  margin: 0 0.5rem 0 0;
  vertical-align: middle;
  accent-color: #B8174F;
}

.aide {
  margin: 0.6rem 0 0 0;
  color: #4F625C;
  font-size: 0.95rem;
}

.aide a {
  color: #B8174F;
}

/* ---------- Pied de page ---------- */

.pied {
  padding: 130px 0 2rem 0;
  background-color: var(--sapin);
  background-image: url("img/montagnes-clair.svg");
  background-repeat: repeat-x;
  background-position: top left;
  background-size: 100% 120px;
  color: #EEF2EC;
  font-size: 1rem;
}

.pied a {
  color: #A8DCC8;
}

.pied a:hover {
  color: #16302B;
  background-color: #A8DCC8;
}

.pied-marque b {
  font-size: 2rem;
}

.pied-liens {
  list-style: none;
  padding: 0;
}

.pied-liens li {
  display: inline-block;
  margin-right: 1.2rem;
}

.smolweb {
  color: #A8DCC8;
  font-size: 0.9rem;
}

/* ---------- Écrans étroits ---------- */

@media (max-width: 52rem) {
  .colonne, .bloc-une .colonne, .bloc-une .colonne + .colonne,
  .porte, .machine {
    display: block;
    width: auto;
    margin-right: 0;
  }

  .machine {
    margin-bottom: 1.2rem;
  }

  .ticket {
    margin-top: 2rem;
  }
}

@media (max-width: 34rem) {
  h1, .bloc-une h1 {
    font-size: 2.3rem;
  }

  .marque b {
    font-size: 2.4rem;
  }

  .bloc-une, .bloc-bandeau, .bloc-encart {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }
}

/* ---------- Mode sombre ---------- */

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #10201C;
    --blanc: #F4F7F2;
    --encre: #E4EEE8;
    --sapin: #0B1714;
    --sirop: #FF7BA6;
    --menthe: #2C5C4E;
    --gris: #A9BBB4;
    --ticket-fond: #F4F7F2;
  }

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

  .bloc-une a:not(.bouton) {
    color: #A8DCC8;
  }

  .bloc-une .bouton, .bloc-une .bouton:hover {
    color: #10201C;
  }

  .bouton, button {
    color: #10201C;
  }

  .bouton-second {
    color: var(--encre);
  }

  .bloc-une {
    background-color: #183A32;
  }

  .bloc-une .bouton-second {
    color: #EEF2EC;
  }

  .bloc-bandeau {
    background-color: #7A0F35;
  }

  .bloc-bandeau .bouton {
    color: #7A0F35;
  }

  .bloc-encart {
    color: var(--encre);
  }

  .bloc-encart a:not(.bouton) {
    color: var(--encre);
  }

  .pied {
    background-image: url("img/montagnes-sombre.svg");
  }

  .pied a, .smolweb {
    color: #A8DCC8;
  }

  .ticket::before {
    background-image: url("img/dentelure-sombre.svg");
  }

  .ticket::after {
    background-image: url("img/dentelure-bas-sombre.svg");
  }
}