/* recettecrepes.fr — feuille de style unique, aucun script, aucun backend */

/* ---------- Jetons ---------- */
:root {
  /* Les cinq couleurs du site : une par section, reprises dans les garnitures */
  --faience:   #1d4f91;  /* bleu de Quimper */
  --caramel:   #c3791a;  /* caramel au beurre salé */
  --cidre:     #4e7c33;  /* pomme à cidre */
  --framboise: #b8365a;  /* confiture */
  --chocolat:  #6d4430;  /* blé noir, chocolat */
  --citron:    #b08a0e;  /* sucre-citron */

  --encre:     #16203a;  /* le texte */
  --papier:    #faf6ee;  /* papier chaud */
  --gris:      #69728a;  /* gris à biais bleu */
  --filet:     #d9d0be;  /* traits, pointillés */

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Karla", "Helvetica Neue", Arial, sans-serif;
  --mono:  "DM Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --faience:   #7fb0ea;
    --caramel:   #e5a63f;
    --cidre:     #8ec46a;
    --framboise: #ef7b99;
    --chocolat:  #c99272;
    --citron:    #ddbb3c;

    --encre:     #ece7dc;
    --papier:    #131927;
    --gris:      #9aa3b8;
    --filet:     #353e50;
  }
}

:root[data-theme="dark"] {
  --faience:   #7fb0ea;
  --caramel:   #e5a63f;
  --cidre:     #8ec46a;
  --framboise: #ef7b99;
  --chocolat:  #c99272;
  --citron:    #ddbb3c;

  --encre:     #ece7dc;
  --papier:    #131927;
  --gris:      #9aa3b8;
  --filet:     #353e50;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 1.0625rem/1.65 var(--sans);
  text-rendering: optimizeLegibility;
}

.wrap {
  width: 100%;
  max-width: 54rem;
  margin-inline: auto;
  padding-inline: 1.25rem;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; }
b, strong { font-weight: 700; }

a { color: var(--accent, var(--faience)); }

.skip {
  position: absolute; left: -9999px;
  background: var(--faience); color: var(--papier);
  padding: .6rem 1rem; z-index: 5; border-radius: 0 0 .4rem 0;
}
.skip:focus { left: 0; }

:is(a, label, summary, input):focus-visible {
  outline: 2px solid var(--accent, var(--caramel));
  outline-offset: 3px;
}

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

/* ---------- Bandeaux colorés ---------- */
.mariniere {
  height: 9px;
  background: repeating-linear-gradient(
    90deg, var(--faience) 0 18px, transparent 18px 36px);
}

/* Les cinq couleurs des cinq sections, dans l'ordre de la page */
.spectre {
  height: 4px;
  background: linear-gradient(90deg,
    var(--faience)   0 20%,
    var(--caramel)   20% 40%,
    var(--cidre)     40% 60%,
    var(--framboise) 60% 80%,
    var(--chocolat)  80% 100%);
}

/* ---------- En-tête ---------- */
.eyebrow {
  font: 500 .72rem/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent, var(--gris));
  margin-bottom: 1.1rem;
}

.hero { padding-block: clamp(2.25rem, 6vw, 4rem) clamp(1.75rem, 4vw, 2.75rem); }

.hero-grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(1.5rem, 4vw, 3rem);
}

.hero h1 {
  font-size: clamp(3.5rem, 14vw, 8rem);
  line-height: .86;
  letter-spacing: -.035em;
  font-weight: 700;
  margin-bottom: 1.1rem;
  color: var(--faience);
}
.hero h1 .surtitre {
  display: block;
  font-family: var(--sans);
  font-size: clamp(.95rem, 2.6vw, 1.15rem);
  font-weight: 500;
  letter-spacing: .02em;
  line-height: 1.2;
  color: var(--encre);
  margin-bottom: .35rem;
}
.hero h1 .point { color: var(--framboise); }

.chapeau {
  font-size: clamp(1.0625rem, 2.4vw, 1.25rem);
  max-width: 34ch;
}
.chapeau strong { color: var(--framboise); }

.billig {
  flex: 0 0 clamp(96px, 20vw, 168px);
  width: clamp(96px, 20vw, 168px);
  max-width: 100%;
  margin-top: .5rem;
}
.b-fonte  { fill: none; stroke: var(--faience); stroke-width: 2; opacity: .45; }
.b-bord   { fill: none; stroke: var(--caramel); stroke-width: 1; opacity: .55; }
.b-crepe  { fill: var(--caramel); opacity: .16; }
.b-dore   { fill: none; stroke: var(--caramel); stroke-width: 1.8;
            stroke-linecap: round; opacity: .8; }
.b-dore-2 { stroke: var(--chocolat); opacity: .5; }
.b-rozell path { fill: none; stroke: var(--chocolat); stroke-width: 2.6;
                 stroke-linecap: round; }

/* Fiche technique */
.facts {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  border-top: 2px solid var(--faience);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.facts li {
  border-bottom: 1px solid var(--filet);
  padding: .7rem .9rem .7rem 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.facts .k {
  font: 400 .68rem/1.2 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.facts .v {
  font: 500 1.0625rem/1.2 var(--mono);
  font-variant-numeric: tabular-nums;
}

/* Sommaire : chaque entrée porte la couleur de sa section */
.somm {
  margin-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.somm a {
  font: 500 .8rem/1 var(--mono);
  letter-spacing: .02em;
  text-decoration: none;
  padding: .5rem .8rem;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 9%, var(--papier));
}
.somm a:hover { background: color-mix(in srgb, var(--c) 20%, var(--papier)); }
.somm a:nth-child(1) { --c: var(--faience); }
.somm a:nth-child(2) { --c: var(--caramel); }
.somm a:nth-child(3) { --c: var(--cidre); }
.somm a:nth-child(4) { --c: var(--framboise); }
.somm a:nth-child(5) { --c: var(--chocolat); }
.somm a:nth-child(6) { --c: var(--citron); }

/* ---------- Sections : une couleur chacune ---------- */
.section { padding-block: clamp(2.25rem, 5vw, 3.5rem); --accent: var(--faience); }
#ingredients { --accent: var(--faience); }
#preparation { --accent: var(--caramel); }
#tourdemain  { --accent: var(--cidre); }
#garnitures  { --accent: var(--framboise); }
#sarrasin    { --accent: var(--chocolat); }
#questions   { --accent: var(--citron); }

.teinte {
  background: color-mix(in srgb, var(--accent) 7%, var(--papier));
  border-block: 1px solid color-mix(in srgb, var(--accent) 22%, var(--papier));
}

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.75rem;
}

.sec-head h2 {
  font-size: clamp(1.65rem, 4.2vw, 2.35rem);
  letter-spacing: -.015em;
  color: var(--accent);
  display: flex;
  align-items: baseline;
  gap: .7rem;
}

.sec-head .num {
  font: 500 .85rem/1 var(--mono);
  background: var(--accent);
  color: var(--papier);
  border-radius: 50%;
  width: 2rem; height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  align-self: center;
}

h3 { font-size: 1.1rem; }
.cols h3 { color: var(--accent); }

.intro { color: var(--gris); max-width: 50ch; }

.cols {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: start;
}

/* ---------- Doses : bascule 12 / 24, sans JavaScript ---------- */
.sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.doses {
  display: flex;
  border: 1px solid var(--accent);
  border-radius: 999px;
  overflow: hidden;
}
.doses label {
  font: 500 .78rem/1 var(--mono);
  letter-spacing: .04em;
  padding: .55rem .95rem;
  color: var(--accent);
  cursor: pointer;
}
.doses label + label { border-left: 1px solid var(--accent); }

#d12:checked ~ .sec-head .doses label[for="d12"],
#d24:checked ~ .sec-head .doses label[for="d24"] {
  background: var(--accent);
  color: var(--papier);
}
#d12:focus-visible ~ .sec-head .doses label[for="d12"],
#d24:focus-visible ~ .sec-head .doses label[for="d24"] {
  outline: 2px solid var(--framboise);
  outline-offset: 2px;
}

.q24 { display: none; }
#d24:checked ~ .cols .q12 { display: none; }
#d24:checked ~ .cols .q24 { display: inline; }

/* ---------- Ingrédients, à la carte de crêperie ---------- */
.ing { list-style: none; margin: .5rem 0 0; padding: 0; }
.ing li { display: flex; }
.ing li + li { margin-top: .1rem; }

.ing label,
.ing.serre li {
  display: flex;
  flex: 1;
  align-items: baseline;
  gap: .55rem;
  padding: .45rem 0;
  cursor: pointer;
}
.ing.serre li { cursor: default; }

.ing input[type="checkbox"] {
  flex: none;
  width: 1rem; height: 1rem;
  margin: 0;
  accent-color: var(--accent);
  align-self: center;
}

.ing .nom { flex: 0 1 auto; }

.ing .ou { color: var(--gris); font-size: .9em; font-style: italic; }

.ing .leader {
  flex: 1 1 1.5rem;
  min-width: 1.5rem;
  border-bottom: 1px dotted color-mix(in srgb, var(--accent) 45%, var(--filet));
  translate: 0 -.3em;
}

.ing .qte {
  flex: none;
  font: 500 .95rem/1.3 var(--mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--accent);
}

.ing input:checked ~ .nom { color: var(--gris); text-decoration: line-through; }
.ing input:checked ~ .qte { color: var(--gris); }

.ratio {
  margin-top: 1.75rem;
  padding: 1.1rem 1.25rem;
  background: color-mix(in srgb, var(--framboise) 10%, var(--papier));
  border-left: 3px solid var(--framboise);
  font-size: .97rem;
}
.ratio-k {
  display: block;
  font: 400 .68rem/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--framboise);
  margin-bottom: .45rem;
}

/* ---------- Étapes ---------- */
.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 0; padding: 0;
  max-width: 44rem;
}

.etapes li {
  counter-increment: etape;
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 0 1rem;
  padding-block: 1.35rem;
  border-top: 1px solid var(--filet);
}
.etapes li:last-child { border-bottom: 1px solid var(--filet); }

.etapes li::before {
  content: counter(etape, decimal-leading-zero);
  font: 500 1.35rem/1 var(--mono);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  grid-row: span 2;
  padding-top: .15rem;
}

.etapes h3 {
  margin-bottom: .3rem;
  color: var(--accent);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
}

.etapes p { margin: 0; max-width: 62ch; }

.tag {
  font: 500 .68rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--papier);
  background: var(--framboise);
  border-radius: 999px;
  padding: .32rem .6rem;
}

/* ---------- Tour de main ---------- */
.astuces {
  margin: 0;
  display: grid;
  grid-template-columns: 13rem 1fr;
  max-width: 48rem;
}
.astuces dt {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--accent);
  padding: 1rem 1.5rem 1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--filet));
}
.astuces dd {
  margin: 0;
  padding: 1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 30%, var(--filet));
}
.astuces dd:last-of-type,
.astuces dt:last-of-type {
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 30%, var(--filet));
}

/* ---------- Garnitures : chaque étiquette prend la couleur de ce qu'elle est --- */
.tags {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.tags li {
  font-size: .95rem;
  padding: .45rem .85rem;
  border-radius: 999px;
  color: var(--c);
  border: 1px solid color-mix(in srgb, var(--c) 45%, var(--papier));
  background: color-mix(in srgb, var(--c) 12%, var(--papier));
}
.t-citron    { --c: var(--citron); }
.t-caramel   { --c: var(--caramel); }
.t-chocolat  { --c: var(--chocolat); }
.t-framboise { --c: var(--framboise); }
.t-cidre     { --c: var(--cidre); }
.t-faience   { --c: var(--faience); }

/* ---------- Encart sarrasin ---------- */
.encart {
  background: color-mix(in srgb, var(--chocolat) 10%, var(--papier));
  border-block: 2px solid color-mix(in srgb, var(--chocolat) 35%, var(--papier));
}
.encart h2 {
  font-size: clamp(1.5rem, 3.6vw, 2rem);
  color: var(--accent);
  margin-bottom: .75rem;
}
.encart > .wrap > p { max-width: 58ch; }
.encart .ing { max-width: 32rem; }
.encart .note { margin-top: 1.25rem; font-size: .97rem; max-width: 62ch; }

/* ---------- Questions fréquentes ---------- */
.faq { max-width: 48rem; display: grid; gap: .6rem; }

.faq details {
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--filet));
  border-radius: .5rem;
  background: var(--papier);
  padding: 0 1rem;
}
.faq summary {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 1.02rem;
  color: var(--accent);
  cursor: pointer;
  padding: .9rem 0;
  list-style: none;
  display: flex;
  align-items: baseline;
  gap: .6rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  font: 500 1.1rem/1 var(--mono);
  color: var(--accent);
  flex: none;
}
.faq details[open] summary::before { content: "–"; }
.faq summary + p,
.faq details > p { margin: 0 0 1rem; max-width: 64ch; }

/* ---------- Pied de page ---------- */
footer { padding-bottom: 3rem; }
footer .spectre { margin-bottom: 2.5rem; }
.foot { display: grid; gap: .75rem; }
.signature {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--framboise);
  margin: 0;
}
.site { font: 400 .85rem/1.6 var(--mono); color: var(--gris); margin: 0; }
.site a { color: var(--faience); }

/* ---------- Petits écrans ---------- */
@media (max-width: 46rem) {
  .hero-grid { flex-direction: column-reverse; align-items: flex-start; }
  .cols { grid-template-columns: 1fr; }
  .astuces { grid-template-columns: 1fr; }
  .astuces dt { padding-bottom: .15rem; }
  .astuces dd { border-top: 0; padding-top: 0; padding-bottom: 1rem; }
  .astuces dt:last-of-type { border-bottom: 0; }
  .etapes li { grid-template-columns: 2.5rem 1fr; }
}

/* ---------- Impression : la fiche sur une feuille ---------- */
@media print {
  :root {
    --faience: #000; --caramel: #000; --cidre: #000; --framboise: #000;
    --chocolat: #000; --citron: #000;
    --encre: #000; --gris: #444; --papier: #fff; --filet: #999;
  }
  .mariniere, .spectre, .doses, .billig, .somm, footer, .skip { display: none; }
  .ing input[type="checkbox"] { display: none; }
  .teinte, .encart { background: #fff; border: 0; }
  body { font-size: 11pt; }
  .hero { padding-block: 0 1rem; }
  .hero h1 { font-size: 32pt; }
  .section { padding-block: .75rem; break-inside: avoid; }
  .faq details { border: 0; padding: 0; }
  /* à l'impression, les réponses repliées doivent apparaître */
  .faq details::details-content { content-visibility: visible !important; }
  .faq details:not([open]) > *:not(summary) { display: block !important; }
}