/* Carnet Plein — site vitrine. Aucune ressource externe : polices auto-hébergées (licence OFL). */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url("/assets/fonts/bricolage-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Kalam";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/assets/fonts/kalam-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --papier: #f2f4f3;      /* plaque de plâtre */
  --feuille: #ffffff;     /* page du carnet */
  --encre: #15233f;       /* encre bleu nuit */
  --cordeau: #1848c8;     /* poudre de cordeau à tracer */
  --cordeau-fonce: #103593;
  --stylo: #1b3fa8;       /* bille bleue */
  --metre: #ffce1f;       /* mètre ruban */
  --metre-fonce: #e9b800;
  --beton: #566070;
  --ligne: #c6d0e4;       /* réglure */
  --marge: #e4566e;       /* marge rouge du carnet */
  --souche-jaune: #fff1a8;
  --souche-rose: #f9cfd6;
  --ok: #17734a;
  --alerte: #b3261e;
  --rayon: 10px;
  --largeur: 72rem;
  --gouttiere: clamp(1.1rem, 4vw, 2.5rem);
  --saut: clamp(3.5rem, 9vw, 7rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 60rem) { body { font-size: 1.125rem; } }

img, svg { max-width: 100%; height: auto; }
a { color: var(--cordeau); text-underline-offset: 0.18em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--cordeau-fonce); }
:focus-visible { outline: 3px solid var(--cordeau); outline-offset: 3px; border-radius: 4px; }
p { margin: 0 0 1em; max-width: 66ch; }
strong { font-weight: 700; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pot { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }

h1, h2, h3 { margin: 0; font-stretch: 80%; letter-spacing: -0.015em; text-wrap: balance; }
h1 { font-size: clamp(2.7rem, 9.2vw, 5.4rem); font-weight: 800; line-height: 0.94; font-stretch: 76%; letter-spacing: -0.025em; }
h2 { font-size: clamp(1.95rem, 5vw, 3.1rem); font-weight: 760; line-height: 1.02; }
h3 { font-size: 1.3rem; font-weight: 700; line-height: 1.2; font-stretch: 88%; }

.enveloppe { width: 100%; max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }

/* ---------- En-tête ---------- */
.entete { padding-block: 1rem; }
.entete .enveloppe { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marque { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--encre); text-decoration: none; font-weight: 800; font-stretch: 78%; font-size: 1.45rem; letter-spacing: -0.02em; }
.marque svg { width: 1.9rem; height: 1.9rem; flex: none; }
.entete-lien { font-weight: 650; font-size: 1rem; white-space: nowrap; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.4rem; padding: 0.85rem 1.5rem;
  background: var(--metre); color: var(--encre);
  border: 2px solid var(--encre); border-radius: var(--rayon);
  font: inherit; font-weight: 750; font-stretch: 88%; font-size: 1.15rem; line-height: 1.15; text-decoration: none; text-align: center;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--encre);
  transition: transform 0.08s ease, box-shadow 0.08s ease, background-color 0.15s ease;
}
.bouton:hover { background: var(--metre-fonce); color: var(--encre); }
.bouton:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--encre); }
.bouton[disabled] { opacity: 0.6; cursor: progress; }
.bouton-large { width: 100%; }

/* ---------- Héros ---------- */
.heros { padding-block: clamp(1.5rem, 5vw, 3.5rem) var(--saut); }
.heros-grille { display: grid; gap: clamp(2.5rem, 6vw, 4rem); align-items: center; }
@media (min-width: 62rem) { .heros-grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.carnet-zone { max-width: 34rem; width: 100%; justify-self: center; margin: 0; }
.heros-texte p.chapo { font-size: clamp(1.15rem, 2.4vw, 1.35rem); line-height: 1.45; margin-top: 1.4rem; max-width: 34ch; max-width: min(100%, 38ch); }
.heros-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.8rem; }
.heros-note { margin-top: 1.1rem; color: var(--beton); font-size: 0.98rem; }

/* ---------- Le carnet (signature visuelle) ---------- */
.carnet-zone { position: relative; padding: 0.6rem 0.9rem 1.4rem 0.4rem; }
.carnet { position: relative; transform: rotate(-1.4deg); }
.carnet::before, .carnet::after {
  content: ""; position: absolute; inset: 0; border-radius: 6px; z-index: 0;
}
.carnet::before { background: var(--souche-rose); transform: translate(14px, 16px) rotate(1.6deg); }
.carnet::after { background: var(--souche-jaune); transform: translate(7px, 8px) rotate(0.8deg); }
.carnet-page {
  position: relative; z-index: 1;
  background:
    linear-gradient(90deg, transparent 4.5rem, var(--marge) 4.5rem, var(--marge) calc(4.5rem + 2px), transparent calc(4.5rem + 2px)),
    var(--feuille);
  border-radius: 6px;
  border: 1px solid #dfe4ee;
  padding: 0 0 0.4rem;
  overflow: hidden;
}
.carnet-tete {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1.05rem 1.1rem 0.75rem 5.3rem;
  border-bottom: 2px solid var(--encre);
  font-weight: 750; font-stretch: 84%;
}
.carnet-tete span:last-child { color: var(--beton); font-weight: 500; font-size: 0.9rem; white-space: nowrap; }
.carnet-lignes { list-style: none; margin: 0; padding: 0; }
.carnet-lignes li {
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center;
  min-height: 4.15rem; border-bottom: 1px solid var(--ligne);
}
.carnet-lignes li:last-child { border-bottom: 0; }
.carnet-jour { padding-left: 0.8rem; font-size: 0.82rem; line-height: 1.2; color: var(--beton); font-weight: 600; white-space: nowrap; }
.carnet-jour b { display: block; color: var(--encre); font-weight: 750; font-size: 0.95rem; }
.carnet-saisie { padding: 0.45rem 0.9rem 0.45rem 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.1rem 0.8rem; }
.carnet-ecrit { font-family: "Kalam", "Comic Sans MS", cursive; color: var(--stylo); font-size: 1.16rem; line-height: 1.2; }
.tampon {
  display: inline-block; font-size: 0.74rem; font-weight: 750; font-stretch: 84%; letter-spacing: 0.01em;
  padding: 0.12rem 0.45rem; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(-2.5deg); white-space: nowrap;
  color: var(--beton);
}
.tampon-ok { color: var(--ok); }
.tampon-vif { color: var(--marge); }
.carnet-legende { margin: 1.5rem 0 0 0.4rem; font-size: 0.9rem; color: var(--beton); max-width: 46ch; }

@media (prefers-reduced-motion: no-preference) {
  .carnet-lignes li .carnet-saisie { animation: ecrire 0.75s cubic-bezier(0.3, 0.6, 0.3, 1) both; }
  .carnet-lignes li:nth-child(1) .carnet-saisie { animation-delay: 0.35s; }
  .carnet-lignes li:nth-child(2) .carnet-saisie { animation-delay: 0.95s; }
  .carnet-lignes li:nth-child(3) .carnet-saisie { animation-delay: 1.55s; }
  .carnet-lignes li:nth-child(4) .carnet-saisie { animation-delay: 2.15s; }
  .carnet-lignes li:nth-child(5) .carnet-saisie { animation-delay: 2.75s; }
  .carnet-lignes li:nth-child(6) .carnet-saisie { animation-delay: 3.35s; }
  @keyframes ecrire { from { clip-path: inset(0 100% 0 0); opacity: 0.2; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--saut); }
.section-teintee { background: #e7ebee; }
.section-encre { background: var(--encre); color: #f4f6fb; }
.section-encre a { color: var(--metre); }
.section-encre .discret { color: #b9c3d6; }
.cordeau { position: relative; padding-top: 1.6rem; margin-bottom: clamp(1.6rem, 4vw, 2.6rem); }
.cordeau::before {
  content: ""; position: absolute; top: 0; right: 100%; margin-right: -4.5rem; width: 100vw; height: 3px;
  background: var(--cordeau); border-radius: 0 3px 3px 0;
}
.section-encre .cordeau::before { background: var(--metre); }
.cordeau p { margin-top: 1rem; font-size: 1.15rem; }
.discret { color: var(--beton); font-size: 0.95rem; }

/* ---------- Comparatif ---------- */
.comparatif { width: 100%; border-collapse: collapse; background: var(--feuille); border: 2px solid var(--encre); border-radius: var(--rayon); overflow: hidden; }
.comparatif th, .comparatif td { text-align: left; vertical-align: top; padding: 0.95rem 1rem; border-bottom: 1px solid var(--ligne); }
.comparatif thead th { font-size: 0.92rem; font-weight: 700; color: var(--beton); border-bottom: 2px solid var(--encre); }
.comparatif tbody th { font-weight: 750; font-stretch: 88%; width: 22%; }
.comparatif tbody tr:last-child th, .comparatif tbody tr:last-child td { border-bottom: 0; background: #fff8d6; font-weight: 600; }
.comparatif tbody tr:last-child th { font-size: 1.15rem; font-weight: 800; }
.table-cadre { border-radius: var(--rayon); }
@media (max-width: 47.99rem) {
  .comparatif, .comparatif tbody, .comparatif tr, .comparatif th, .comparatif td { display: block; width: 100%; }
  .comparatif thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .comparatif tbody tr { border-bottom: 2px solid var(--encre); padding: 0.4rem 0 0.6rem; }
  .comparatif tbody tr:last-child { border-bottom: 0; background: #fff8d6; }
  .comparatif tbody th { width: 100%; font-size: 1.2rem; border-bottom: 0; padding-bottom: 0.2rem; }
  .comparatif td { border-bottom: 0; padding-block: 0.3rem; }
  .comparatif td::before { content: attr(data-titre) " : "; color: var(--beton); font-weight: 600; font-size: 0.9rem; display: block; }
}

/* ---------- Étapes (vraie séquence) ---------- */
.etapes { list-style: none; counter-reset: etape; margin: 0; padding: 0; display: grid; gap: 0; }
.etapes li { counter-increment: etape; display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0 1rem; padding-block: 1.5rem; border-top: 1px solid #c9d0d8; }
.etapes li:last-child { border-bottom: 1px solid #c9d0d8; }
.etapes li::before { content: counter(etape); grid-column: 1; grid-row: 1 / span 2; font-size: 3.6rem; font-weight: 800; font-stretch: 75%; line-height: 0.85; color: var(--cordeau); }
.etapes li > h3, .etapes li > p { grid-column: 2; }
.etapes h3 { margin-bottom: 0.35rem; }
.etapes p { margin: 0; }
@media (min-width: 62rem) { .etapes li { grid-template-columns: 6rem minmax(0, 20rem) minmax(0, 1fr); align-items: start; } .etapes li::before { font-size: 4.6rem; grid-row: 1; } .etapes li > h3 { margin: 0.2rem 0 0; } .etapes li > p { grid-column: 3; } }

/* ---------- Le devis (tarif) ---------- */
.devis-grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .devis-grille { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.devis { background: var(--feuille); border: 2px solid var(--encre); border-radius: 6px; box-shadow: 10px 12px 0 var(--souche-jaune), 20px 24px 0 var(--souche-rose); margin-right: 20px; margin-bottom: 24px; }
.devis-tete { display: flex; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.2rem; border-bottom: 2px solid var(--encre); }
.devis-tete strong { font-size: 1.5rem; font-weight: 800; font-stretch: 78%; }
.devis-tete span { color: var(--beton); font-size: 0.92rem; text-align: right; }
.devis table { width: 100%; border-collapse: collapse; }
.devis th, .devis td { padding: 0.7rem 1.2rem; text-align: left; border-bottom: 1px solid var(--ligne); vertical-align: top; }
.devis td:last-child, .devis th:last-child { text-align: right; white-space: nowrap; }
.devis thead th { font-size: 0.88rem; color: var(--beton); font-weight: 650; }
.devis tbody td small { display: block; color: var(--beton); font-size: 0.9rem; line-height: 1.35; }
.devis tfoot td { border-bottom: 0; font-weight: 800; font-size: 1.3rem; font-stretch: 84%; padding-block: 1rem; }
.devis tfoot td:last-child { font-size: 1.9rem; }
.devis-lancement { margin: 0 1.2rem 1.2rem; padding: 0.9rem 1rem; background: #fff8d6; border: 1.5px dashed var(--encre); border-radius: 6px; }
.devis-lancement p { margin: 0; font-size: 1rem; }
.devis-accord { padding: 0 1.2rem 1.4rem; }
.devis-accord p { font-family: "Kalam", cursive; color: var(--stylo); font-size: 1.25rem; margin: 0 0 0.6rem; }
.liste-coches { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.85rem; }
.liste-coches li { padding-left: 2rem; position: relative; max-width: 60ch; }
.liste-coches li::before { content: ""; position: absolute; left: 0.1rem; top: 0.3em; width: 1.05rem; height: 0.55rem; border-left: 3px solid var(--cordeau); border-bottom: 3px solid var(--cordeau); transform: rotate(-45deg); }

/* ---------- Engagements ---------- */
.engagements { display: grid; gap: 2.2rem; }
@media (min-width: 50rem) { .engagements { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.engagements h3 { font-size: 1.55rem; font-stretch: 80%; margin-bottom: 0.6rem; }
.engagements p { margin: 0; color: #d7deeb; }

/* ---------- Simulateur ---------- */
.simulateur { display: grid; gap: 2rem; background: var(--feuille); border: 2px solid var(--encre); border-radius: var(--rayon); padding: clamp(1.2rem, 3.5vw, 2.2rem); }
@media (min-width: 56rem) { .simulateur { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.reglage { display: grid; gap: 0.3rem; margin-bottom: 1.35rem; }
.reglage label { font-weight: 650; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.reglage output { font-weight: 800; font-stretch: 84%; font-size: 1.2rem; white-space: nowrap; }
.reglage input[type="range"] { width: 100%; accent-color: var(--cordeau); height: 2rem; }
.resultat { border-left: 3px solid var(--cordeau); padding-left: 1.3rem; }
.resultat p.grand { font-size: clamp(1.3rem, 3vw, 1.7rem); line-height: 1.3; font-weight: 600; font-stretch: 90%; }
.resultat p.grand b { font-weight: 800; background: linear-gradient(transparent 62%, var(--metre) 62%); }
.resultat dl { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; margin: 1.2rem 0 1rem; }
.resultat dt { color: var(--beton); }
.resultat dd { margin: 0; font-weight: 750; text-align: right; }

/* ---------- FAQ ---------- */
.faq { max-width: 50rem; }
.faq details { border-top: 1px solid #c9d0d8; }
.faq details:last-child { border-bottom: 1px solid #c9d0d8; }
.faq summary { cursor: pointer; padding: 1.1rem 2.2rem 1.1rem 0; font-weight: 700; font-size: 1.15rem; font-stretch: 90%; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 0.3rem; top: 0.85rem; font-size: 1.6rem; font-weight: 500; color: var(--cordeau); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 1.2rem; }

/* ---------- Formulaire ---------- */
.zone-grille { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 62rem) { .zone-grille { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.formulaire { background: var(--feuille); border: 2px solid var(--encre); border-radius: var(--rayon); padding: clamp(1.2rem, 3.5vw, 2rem); display: grid; gap: 1.05rem; }
.champ { display: grid; gap: 0.35rem; }
.champ label { font-weight: 650; }
.champ .aide { color: var(--beton); font-size: 0.9rem; font-weight: 400; }
.champ input, .champ select, .champ textarea {
  font: inherit; color: var(--encre); background: #fbfcfd; width: 100%;
  min-height: 3.2rem; padding: 0.7rem 0.85rem; border: 2px solid #8a94a6; border-radius: 8px;
}
.champ textarea { min-height: 6.5rem; resize: vertical; }
.champ input:focus-visible, .champ select:focus-visible, .champ textarea:focus-visible { outline: 3px solid var(--cordeau); outline-offset: 1px; border-color: var(--cordeau); }
.champ input:user-invalid, .champ select:user-invalid { border-color: var(--alerte); }
.duo { display: grid; gap: 1.05rem; }
@media (min-width: 36rem) { .duo { grid-template-columns: 1fr 1fr; } }
.case { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); gap: 0.7rem; align-items: start; font-size: 0.98rem; line-height: 1.4; }
.case input { width: 1.45rem; height: 1.45rem; margin: 0.1rem 0 0; accent-color: var(--cordeau); }
.formulaire .mention { font-size: 0.88rem; color: var(--beton); margin: 0; }
.erreur-envoi { color: var(--alerte); font-weight: 650; margin: 0; }

/* ---------- Pied ---------- */
.pied { padding-block: 2.5rem 3rem; border-top: 2px solid var(--encre); font-size: 0.95rem; }
.pied .enveloppe { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.pied p { margin: 0; color: var(--beton); }

/* ---------- Pages intérieures ---------- */
.page-simple { padding-block: clamp(2rem, 6vw, 4rem) var(--saut); }
.page-simple h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); margin-bottom: 1.5rem; }
.page-simple h2 { font-size: clamp(1.5rem, 3.6vw, 2rem); margin: 2.6rem 0 0.8rem; }
.page-simple h3 { margin: 1.8rem 0 0.5rem; }
.page-simple ul, .page-simple ol { max-width: 66ch; padding-left: 1.3rem; }
.page-simple li { margin-bottom: 0.45rem; }
.a-completer { background: var(--metre); padding: 0.05em 0.3em; border-radius: 3px; font-weight: 650; }
.encart { background: var(--feuille); border: 2px solid var(--encre); border-radius: var(--rayon); padding: 1.2rem 1.3rem; margin: 1.5rem 0; max-width: 46rem; }
.encart > :last-child { margin-bottom: 0; }
.message {
  background: var(--feuille); border: 1px solid #dfe4ee; border-left: 3px solid var(--marge); border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem; margin: 0.8rem 0 1.6rem; max-width: 46rem;
  font-family: "Kalam", cursive; color: var(--stylo); font-size: 1.2rem; line-height: 1.45; white-space: pre-line;
}
.quand { font-weight: 750; font-stretch: 86%; color: var(--cordeau); }
.suite { list-style: none; counter-reset: s; padding: 0; margin: 1.5rem 0; max-width: 46rem; }
.suite li { counter-increment: s; position: relative; padding: 0 0 1.3rem 3.2rem; }
.suite li::before { content: counter(s); position: absolute; left: 0; top: -0.15rem; font-size: 2.4rem; font-weight: 800; font-stretch: 75%; color: var(--cordeau); line-height: 1; }

.zone-grille h1 { font-size: clamp(2.2rem, 6.4vw, 3.7rem); line-height: 1; }

/* Formulaire de démarrage : groupes de champs */
.formulaire fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 1.05rem; min-width: 0; }
.formulaire fieldset + fieldset { padding-top: 1.05rem; border-top: 1px solid var(--ligne); }
.formulaire legend { font-weight: 750; font-size: 1.1rem; padding: 0; margin-bottom: 0.15rem; }