/* Berceau : pages publiques. Couleurs et polices du contrat commun (section 5), mobile d'abord. */

/* Polices OFL : sous-ensembles latins en WOFF2 (≈ 45 Ko), TTF complets en secours. */
@font-face { font-family: "DM Serif Display"; src: url("polices/DMSerifDisplay-Regular-latin.woff2") format("woff2"), url("polices/DMSerifDisplay-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/Inter-Regular-latin.woff2") format("woff2"), url("polices/Inter-Regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/Inter-SemiBold-latin.woff2") format("woff2"), url("polices/Inter-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Inter"; src: url("polices/Inter-Bold-latin.woff2") format("woff2"), url("polices/Inter-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
:root {
  color-scheme: light dark;
  --fond: #F6EFE4;
  --surface: #FFFFFF;
  --texte: #1E2A3A;
  --discret: #5A6472;
  --trait: #E6DCCB;
  --accent: #C2562F;
  --sur-accent: #FFFFFF;
  --second: #4F7C74;
  --ombre: 0 1px 2px rgba(30, 42, 58, .06), 0 8px 24px rgba(30, 42, 58, .06);
  --titre: "DM Serif Display", Georgia, "Times New Roman", serif;
  --corps: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: #14181F;
    --surface: #1E2530;
    --texte: #EDE6DA;
    --discret: #A9B0BA;
    --trait: #2C3440;
    --accent: #E07A4F;
    --sur-accent: #14181F;
    --second: #7FB0A6;
    --ombre: none;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font: 400 1rem/1.55 var(--corps);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-underline-offset: .18em; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, p, ul { margin: 0; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* Bandeau et pied */
.bandeau {
  max-width: 720px; margin: 0 auto; padding: 18px 16px 6px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.marque {
  display: inline-flex; align-items: center; gap: 10px;
  font: 400 1.6rem/1 var(--titre); color: var(--texte); text-decoration: none;
}
.marque svg { width: 30px; height: 30px; flex: none; }
.bandeau-lien { font-size: .9rem; font-weight: 600; color: var(--discret); text-decoration: none; }

main { max-width: 720px; margin: 0 auto; padding: 8px 16px 40px; }

.pied {
  max-width: 720px; margin: 0 auto; padding: 22px 16px 40px;
  border-top: 1px solid var(--trait); color: var(--discret); font-size: .84rem;
}
.pied p + p { margin-top: 8px; }
.pied a { color: inherit; }
.pied nav { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-weight: 600; }
/* Signature H12 TECH : en pied de toutes les pages, jamais sur les images à partager. */
.pied .signature { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--trait); }
.pied .signature a { color: var(--accent); font-weight: 600; }

/* Titres et textes */
.surtitre { font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--second); }
h1 {
  font: 400 clamp(2.3rem, 9vw, 3.6rem)/1.04 var(--titre);
  letter-spacing: -.01em; margin-top: 10px; overflow-wrap: anywhere;
}
h2 { font: 400 1.65rem/1.15 var(--titre); margin-top: 40px; }
h2 + p, h2 + ul, h2 + .carte, h2 + .grille { margin-top: 10px; }
.chapo { font-size: 1.12rem; margin-top: 14px; max-width: 36em; }
.chapo strong { font-weight: 700; }
p.sous-chapo { margin-top: 4px; }
.discret { color: var(--discret); }
.petit { font-size: .88rem; }
p + p { margin-top: 10px; }

/* Recherche */
.chercher { display: flex; gap: 8px; margin-top: 22px; }
.chercher input {
  flex: 1; min-width: 0; min-height: 54px; padding: 0 16px;
  font: 600 1.1rem var(--corps); color: var(--texte);
  background: var(--surface); border: 1.5px solid var(--trait); border-radius: 16px;
  text-transform: uppercase;
}
.chercher input::placeholder { text-transform: none; font-weight: 400; color: var(--discret); }
.chercher button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 54px; padding: 0 22px; border: 0; border-radius: 16px;
  background: var(--accent); color: var(--sur-accent);
  font: 700 1.02rem var(--corps); text-decoration: none; cursor: pointer;
}
.alerte { margin-top: 10px; color: var(--accent); font-weight: 600; }

.puces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; align-items: center; }
.puce {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--trait); background: var(--surface);
  color: var(--texte); font-weight: 600; font-size: .92rem; text-decoration: none;
}
.puce small { margin-left: 8px; font-weight: 400; color: var(--discret); }

/* Cartes */
.carte {
  margin-top: 16px; padding: 18px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--trait); box-shadow: var(--ombre);
}
.carte > :first-child { margin-top: 0; }
.carte-berceau { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--trait)); }
.berceau-nom { font: 400 clamp(1.9rem, 7vw, 2.6rem)/1.08 var(--titre); color: var(--accent); margin-top: 4px; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.fait { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--trait); }
.fait strong { display: block; font: 400 1.6rem/1.1 var(--titre); }
.apres-grille { margin-top: 12px; }
sup { font-size: .55em; line-height: 0; vertical-align: .9em; margin-left: .04em; }
.fait span { display: block; margin-top: 4px; font-size: .86rem; color: var(--discret); }

.apercu {
  margin-top: 16px; width: 100%; aspect-ratio: 1200 / 630; object-fit: cover;
  border-radius: 18px; background: var(--trait); border: 1px solid var(--trait);
}

.liste { padding-left: 0; list-style: none; }
.liste li { position: relative; padding-left: 22px; margin-top: 8px; }
.liste li::before {
  content: ""; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px;
  border-radius: 50%; background: var(--second);
}
.liste-payante li::before { background: var(--accent); }
.liste + p { margin-top: 12px; }

.prix { font: 400 1.5rem/1.2 var(--titre); margin-top: 14px; }
.stores { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bouton-store { background: var(--texte); color: var(--fond); }
.bouton-store svg { width: 20px; height: 20px; flex: none; }
.bientot {
  display: inline-flex; align-items: center; min-height: 54px; padding: 0 18px;
  border-radius: 16px; border: 1.5px dashed var(--trait); color: var(--discret); font-weight: 600;
}

.source { margin-top: 28px; font-size: .84rem; color: var(--discret); }

/* Pages de texte (confidentialité, suppression) */
.texte h2 { font-size: 1.35rem; margin-top: 30px; }
.texte p, .texte li { max-width: 40em; }
.bloc { margin-top: 10px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--trait); }
.bloc strong { display: block; }
.bloc span { display: block; margin-top: 2px; color: var(--discret); font-size: .94rem; }
.note { margin-top: 26px; color: var(--discret); font-size: .85rem; }

@media (min-width: 640px) {
  main { padding-top: 24px; }
  .carte { padding: 24px; }
}