/* ==========================================================================
   Blum Production — feuille de style
   Organisation : 1. police  2. couleurs (jour / nuit)  3. mise en page
                  4. activités dépliables  5. formulaire  6. animation  7. mobile
   ========================================================================== */

/* 1. Police — hébergée sur le site (pas d'appel à Google : plus rapide, et
      aucune donnée de visiteur envoyée à un tiers) */
@font-face {
  font-family: "Courier Prime";
  src: url("/assets/fonts/courier-prime-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Courier Prime";
  src: url("/assets/fonts/courier-prime-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* 2. Couleurs — définies une seule fois sous forme de variables.
      Le mode nuit ne fait que changer leurs valeurs. */
:root {
  --fond: #FFFFFF;
  --texte: #111111;
  --doux: #66665F;      /* texte secondaire : contraste 5,9:1, lisible */
  --filet: #E2E2DE;     /* lignes de séparation */
  --trait: #8A8A84;     /* soulignement des champs du formulaire */
  --orange: #FF5911;    /* l'orange exact du logo */
  color-scheme: light;
}
/* Nuit : réglage du système (si le visiteur n'a rien choisi sur le site)… */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) {
    --fond: #111111; --texte: #EDEDEA; --doux: #9C9C98;
    --filet: #2E2E2C; --trait: #5A5A57; color-scheme: dark;
  }
}
/* …ou choix fait avec le bouton « nuit » */
:root[data-theme="nuit"] {
  --fond: #111111; --texte: #EDEDEA; --doux: #9C9C98;
  --filet: #2E2E2C; --trait: #5A5A57; color-scheme: dark;
}

/* Le bon logo selon le mode */
.logo-nuit { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="jour"]) .logo-jour { display: none; }
  :root:not([data-theme="jour"]) .logo-nuit { display: block; }
}
:root[data-theme="nuit"] .logo-jour { display: none; }
:root[data-theme="nuit"] .logo-nuit { display: block; }

/* 3. Mise en page */
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: 17px;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

.page {
  min-height: 100vh;
  min-height: 100svh;   /* sur mobile : ignore la barre d'adresse qui apparaît/disparaît */
  display: flex;
  flex-direction: column;
  gap: 48px;
  padding: 32px 48px 28px;
}

.haut {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
}
.logo img { width: 240px; max-width: 60vw; height: auto; }

/* Le contenu est calé en bas de l'écran : le vide au-dessus fait partie du design */
.contenu {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  max-width: 960px;
}
.intro { margin: 0 0 28px; max-width: 760px; }

a { color: inherit; text-decoration-color: var(--orange); text-underline-offset: 4px; }

button { font: inherit; color: inherit; }

.bouton-theme {
  min-height: 44px;            /* taille minimale confortable au doigt */
  padding: 0 4px;
  border: 0;
  background: none;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 4px;
}

:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; }

.bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px;
  font-size: 14px;
  color: var(--doux);
}

/* 4. Activités dépliables — balises <details>/<summary> natives :
      elles fonctionnent même sans JavaScript */
summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 44px;
  padding: 2px 0;
  font-size: 22px;
  cursor: pointer;
  list-style: none;                 /* retire le triangle par défaut */
}
summary::-webkit-details-marker { display: none; }   /* idem pour Safari */

.signe { width: 16px; flex-shrink: 0; color: var(--doux); }
.signe::before { content: "+"; }
details[open] > summary .signe::before { content: "−"; }

summary:hover .nom,
details[open] > summary .nom {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 5px;
}

.panneau { margin: 0 0 14px 30px; }
.panneau > p { margin: 0; max-width: 700px; color: var(--doux); }

.prestations {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 6px 24px;
  font-size: 14px;
  line-height: 1.35;
}
.prestations li { padding-top: 6px; border-top: 1px solid var(--filet); }
.prestations span { display: block; }
.prestations span + span { color: var(--doux); }

.panneau > p.technique { margin-top: 8px; font-size: 13px; }

.contact { margin-top: 40px; }
.contact .nom { text-decoration: underline; text-decoration-color: var(--orange); text-underline-offset: 5px; }
.contact .panneau { margin-top: 8px; max-width: 630px; }

/* 5. Formulaire */
.formulaire { display: flex; flex-direction: column; gap: 20px; }
.champ { display: flex; flex-direction: column; gap: 4px; }
.champ label { font-size: 14px; color: var(--doux); }

.champ input,
.champ textarea {
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  border: 0;
  border-bottom: 1px solid var(--trait);
  border-radius: 0;
  background: transparent;
  color: var(--texte);
  font: inherit;
  font-size: 17px;             /* 16 px minimum : sinon l'iPhone zoome sur le champ */
}
.champ textarea { resize: vertical; }
.champ input:focus,
.champ textarea:focus { outline: none; border-bottom: 2px solid var(--orange); }

/* Le piège à robots est sorti de l'écran (pas display:none, que certains robots repèrent) */
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.mention { margin: 0; max-width: 380px; font-size: 13px; color: var(--doux); }
.mention a { color: var(--doux); }

.envoi button {
  min-height: 44px;
  padding: 0 4px;
  border: 0;
  background: none;
  font-size: 22px;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-underline-offset: 5px;
}
.envoi button[disabled] { opacity: 0.5; cursor: wait; }

.statut { margin: 0; min-height: 1.6em; }
.statut.erreur { color: var(--texte); }
.statut.erreur::before { content: "× "; color: var(--orange); }

/* 6. Animation « machine à écrire » (préparée par theme.js, jouée par main.js) */
.prepare-frappe [data-tape] { visibility: hidden; }      /* rien ne s'affiche avant la frappe */
.prepare-frappe .apres { opacity: 0; }
.apres { transition: opacity 0.6s ease; }

.frappe-ok { visibility: visible; }
.frappe-reste { visibility: hidden; }   /* garde la place du texte à venir : la page ne bouge pas */
.curseur { visibility: visible; color: var(--orange); }

/* Texte lu par les lecteurs d'écran, invisible à l'œil */
.lecteur-ecran {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Page simple (mentions légales, 404, réponse du formulaire) */
.texte-page { max-width: 660px; }
.texte-page h1 { margin: 0; font-size: 22px; }
.texte-page h2 { margin: 40px 0 8px; font-size: 17px; }
.texte-page p { margin: 0; }
.texte-page p.suite { margin-top: 1em; }
.texte-page .retour { margin-top: 48px; }

/* 7. Mobile */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .page { padding: 20px 20px 20px; gap: 40px; }
  summary, .envoi button { font-size: 20px; }
  .panneau { margin-left: 30px; }
}

/* Visiteurs qui ont demandé moins d'animations à leur système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}