/* Garage des Trois Becs — le carnet d'ordres de réparation */

@font-face {
  font-family: "Encode Sans";
  src: url("fonts/encode-sans-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Kalam";
  src: url("fonts/kalam-latin-700-normal.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  --copie: #F2D648;     /* double autocopiant jaune = jaune du logo */
  --copie-fonce: #E3C53A;
  --original: #FBFBF7;  /* bon original */
  --imprime: #17402F;   /* encre imprimée, vert sapin */
  --imprime-doux: rgba(23, 64, 47, .32);
  --bille: #1D3C9E;     /* stylo bille */
  --tampon: #C23A22;    /* tampon, Renault 4 */
  --tampon-fonce: #A12E19;
  --bitume: #26292B;

  --imprime-f: "Encode Sans", "Arial Narrow", sans-serif;
  --main-f: "Kalam", "Comic Sans MS", cursive;
  --taille: 1.0625rem;
  --gouttiere: clamp(1rem, 4vw, 3rem);
  --section: clamp(4.5rem, 10vw, 8.5rem);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scrollbar-color: var(--imprime) var(--copie); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--copie);
  color: var(--imprime);
  font: 400 var(--taille)/1.55 var(--imprime-f);
  font-stretch: 100%;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
::selection { background: var(--bille); color: var(--original); }
:focus-visible { outline: 3px solid var(--bille); outline-offset: 3px; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }

.num { font-family: var(--imprime-f); font-variant-numeric: tabular-nums; }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.evitement {
  position: absolute; left: 1rem; top: -4rem; z-index: 50;
  background: var(--imprime); color: var(--copie); padding: .6rem 1rem;
}
.evitement:focus { top: 1rem; }

/* ——— Bandeau ——— */
.bandeau {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0 var(--gouttiere);
  min-height: 3.5rem;
  border-bottom: 2px solid var(--imprime);
}
.bandeau__nom {
  display: flex; align-items: center; gap: .6rem;
  font-weight: 800; font-stretch: 112%; text-decoration: none; letter-spacing: -.01em;
}
.marque {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  background: var(--imprime); color: var(--copie);
  font-weight: 900; font-stretch: 125%;
}
.bandeau__nav { display: none; gap: 1.5rem; margin-left: auto; font-weight: 600; }
.bandeau__nav a { text-decoration: none; }
.bandeau__nav a:hover { text-decoration: underline; }
.bandeau__tel {
  margin-left: auto; white-space: nowrap;
  font-weight: 800; font-variant-numeric: tabular-nums; text-decoration: none;
  padding: .45rem .75rem; background: var(--tampon); color: var(--original);
}
.bandeau__tel:hover { background: var(--tampon-fonce); }
@media (max-width: 359px) { .nom-long { display: none; } }
@media (max-width: 520px) {
  .bandeau { gap: .6rem; }
  .bandeau__nom { font-size: .875rem; font-stretch: 100%; gap: .45rem; white-space: nowrap; }
  .marque { width: 1.5rem; height: 1.5rem; }
  .bandeau__tel { padding: .4rem .55rem; font-size: .9375rem; }
  .champ { grid-template-columns: 5.4rem 1fr; }
  .champ dt { font-size: .9375rem; }
  .bon__tete .plaque { font-stretch: 100%; letter-spacing: .02em; }
  .bon--souche { grid-template-columns: 2rem 1fr; }
  .bon--souche .champs { padding: .4rem .8rem .5rem; }
}
@media (min-width: 900px) {
  .bandeau__nav { display: flex; }
  .bandeau__tel { margin-left: 0; }
}

/* ——— Briques du formulaire ——— */
.plaque {
  display: inline-block;
  background: var(--imprime); color: var(--copie);
  font-size: var(--taille); font-weight: 800; font-stretch: 125%;
  text-transform: uppercase; letter-spacing: .04em; line-height: 1.2;
  padding: .35rem .65rem .3rem;
}
.bon {
  background: var(--original);
  border: 1.5px solid var(--imprime);
}
.champs { margin: 0; }
.champ {
  display: grid; grid-template-columns: 6.25rem 1fr; align-items: baseline;
  border-bottom: 1px solid var(--imprime-doux);
}
.champ:last-child { border-bottom: 0; }
.champ dt {
  align-self: stretch;
  padding: .55rem .6rem .5rem 0;
  border-right: 1px solid var(--imprime-doux);
  font-weight: 650; font-stretch: 78%; text-transform: uppercase; letter-spacing: .05em;
}
.champ dd { min-width: 0; margin: 0; padding: .45rem 0 .45rem .75rem; }
.ecrit {
  font-family: var(--main-f); color: var(--bille);
  font-size: 1.2em; line-height: 1.4;
}
.champ dd.num { color: var(--bille); font-weight: 600; }

.case { display: inline-flex; align-items: center; gap: .35rem; margin-right: 1.1rem; white-space: nowrap; }
.case svg {
  width: 1.05em; height: 1.05em;
  border: 1.5px solid var(--imprime);
  overflow: visible;
}
.case path { fill: none; stroke: var(--bille); stroke-width: 2.4; stroke-linecap: round; }

.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3.1rem; padding: 0 1.25rem; gap: .3em;
  font-weight: 750; font-stretch: 105%; text-decoration: none;
  border: 2px solid transparent;
  transition: background-color .2s ease-out, color .2s ease-out;
}
.bouton--appel { background: var(--tampon); color: var(--original); }
.bouton--appel:hover { background: var(--tampon-fonce); }
.bouton--route { border-color: var(--imprime); color: var(--imprime); }
.bouton--route:hover { background: var(--imprime); color: var(--copie); }

.section-tete { max-width: 46rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-tete h2 {
  font-size: clamp(2rem, 5vw, 3.6rem);
  font-weight: 850; font-stretch: 118%; line-height: 1; letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.section-tete p { max-width: 60ch; }

/* ——— Accueil ——— */
.accueil__photo { margin: 0; }
.accueil__photo img {
  width: 100%; height: clamp(12rem, 32vh, 22rem);
  object-fit: cover; object-position: center 45%;
}
.bon--accueil {
  position: relative;
  width: min(100% - 2 * var(--gouttiere), 72rem);
  margin: -3.5rem auto 0;
  padding: 1rem clamp(1.1rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
.bon__tete {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding-bottom: .9rem; border-bottom: 2px solid var(--imprime);
}
.bon__lieu { white-space: nowrap; font-weight: 650; font-stretch: 78%; text-transform: uppercase; letter-spacing: .05em; }
.bon__nom {
  margin: 1.1rem 0 1rem;
  font-size: clamp(2.4rem, 10.4vw, 6.2rem);
  font-weight: 900; font-stretch: 112%; line-height: .9; letter-spacing: -.025em;
}
.bon__metier { max-width: 52ch; margin-bottom: 1.25rem; }
.bon--accueil .champs dd > .num { display: block; color: var(--bille); }
.bon--accueil .champs { margin-top: 1.5rem; border-top: 2px solid var(--imprime); }

.tampon {
  display: inline-flex; flex-direction: column; align-items: center;
  margin-top: 1.25rem;
  padding: .45rem .9rem .5rem;
  border: 3px solid var(--tampon);
  outline: 1.5px solid var(--tampon); outline-offset: -7px;
  color: var(--tampon);
  text-transform: uppercase; text-align: center;
  transform: rotate(-6deg);
  mix-blend-mode: multiply; opacity: .9;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='120'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.4 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}
.tampon__note { font-size: 2.2rem; font-weight: 900; font-stretch: 112%; line-height: 1; font-variant-numeric: tabular-nums; }
.tampon__note small { font-size: .5em; }
.tampon__texte { font-weight: 750; font-stretch: 90%; letter-spacing: .08em; font-size: .875rem; }

@media (max-width: 899px) {
  .bon--accueil { display: flex; flex-direction: column; }
  .bon__tete { order: 0; } .bon__nom { order: 1; margin-bottom: .6rem; }
  .bon--accueil .champs { order: 2; margin: .4rem 0 1.25rem; }
  .bon--accueil .actions { order: 3; }
  .bon__metier { order: 4; margin: 1.25rem 0 0; }
  .bon__lieu { display: none; }
  .champ:first-child { position: relative; }
  .tampon { position: absolute; top: 2.1rem; right: -.6rem; margin: 0; padding: .35rem .7rem .4rem; }
  .case { margin-right: .7rem; }
  .tampon__note { font-size: 1.45rem; }
  .tampon__texte { font-size: .6875rem; }
}
@media (min-width: 900px) {
  .accueil__photo img { height: clamp(18rem, 48vh, 34rem); }
  .bon--accueil {
    margin-top: -10rem;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: 3rem;
  }
  .bon__tete, .bon__nom { grid-column: 1 / -1; }
  .bon__nom { margin: 1.4rem 0 1.4rem; max-width: 11ch; }
  .bon--accueil .champs { grid-column: 2; grid-row: 3 / span 2; margin-top: 0; align-self: start; }
  .bon__metier, .bon--accueil .actions { grid-column: 1; }
  .bon--accueil .actions { align-self: end; }
  .tampon { position: absolute; top: 4.6rem; right: 2.5rem; margin: 0; transform: rotate(-8deg); }
  .tampon__note { font-size: 3rem; }
}

/* ——— Pannes : le carnet ——— */
.pannes, .travaux, .releve-mots, .avis, .acces {
  padding: var(--section) var(--gouttiere) 0;
  max-width: 82rem; margin: 0 auto;
}
.carnet { list-style: none; margin: 0; padding: 0; }
.carnet > li { margin-bottom: 1.5rem; break-inside: avoid; }
.bon--souche { display: grid; grid-template-columns: 2.6rem 1fr; }
.souche {
  grid-row: 1 / span 2;
  writing-mode: vertical-rl; transform: rotate(180deg);
  display: flex; align-items: center; justify-content: center;
  border-left: 2px dashed var(--imprime); /* perforation (côté gauche après rotation = droite) */
  font-weight: 800; font-stretch: 125%; letter-spacing: .06em;
  background: var(--copie-fonce);
}
.bon--souche .champs { padding: .5rem 1.1rem .6rem; }
.agrafe {
  position: relative;
  grid-column: 2;
  justify-self: end;
  width: min(62%, 15rem);
  margin: .25rem 1.25rem 1.4rem 0;
  transform: rotate(2.5deg);
}
.agrafe img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 6px solid var(--original); outline: 1px solid var(--imprime-doux); }
.agrafe::before {
  content: ""; position: absolute; z-index: 1;
  top: -.35rem; left: 22%; width: 2.2rem; height: .32rem;
  background: #8A8F93; border-bottom: 1px solid #5C6164;
  transform: rotate(-4deg);
}
.agrafe figcaption { font-family: var(--main-f); color: var(--bille); text-align: right; margin-top: .2rem; }
@media (min-width: 900px) {
  .carnet { columns: 2; column-gap: 2rem; }
}

/* ——— Travaux ——— */
.releve { display: grid; gap: 2.5rem 3rem; }
.releve__groupe ul { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--imprime); }
.releve__groupe .plaque { margin-bottom: .75rem; }
.releve__groupe li {
  display: grid; grid-template-columns: 1fr auto; gap: .1rem 1rem;
  padding: .7rem 0 .75rem;
  border-bottom: 1px solid var(--imprime-doux);
}
.releve__groupe b { font-weight: 750; }
.releve__groupe span { grid-column: 1; }
.releve__groupe i {
  grid-column: 2; grid-row: 1 / span 2; align-self: center; justify-self: end; text-align: right;
  max-width: 11rem;
  font-style: normal; font-family: var(--main-f); color: var(--bille); font-size: 1.1em; line-height: 1.3;
}
@media (min-width: 900px) {
  .releve { display: block; columns: 2; column-gap: 3.5rem; }
  .releve__groupe { break-inside: avoid; margin-bottom: 2.5rem; }
}

/* ——— Relevé des mots ——— */
.releve-mots {
  max-width: none;
  margin-top: var(--section);
  padding-bottom: var(--section);
  background: var(--imprime); color: var(--copie);
}
.releve-mots > * { max-width: 76rem; margin-left: auto; margin-right: auto; }
.releve-mots .section-tete { margin-left: auto; }
.batons { list-style: none; padding: 0; display: grid; gap: 0 3rem; border-top: 2px solid var(--copie); }
.batons li {
  display: grid; grid-template-columns: 1fr auto 2.2rem; align-items: center; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid rgba(242, 214, 72, .35);
}
.mot { font-size: 1.3rem; font-weight: 750; font-stretch: 115%; }
.batons .num { text-align: right; font-weight: 600; }
.trait { display: inline-flex; align-items: center; gap: .4rem; height: 2.2rem; }
.trait s {
  display: block; width: 3px; height: 1.9rem; background: var(--original);
  transform: rotate(6deg);
}
.trait s:nth-child(2n) { height: 1.75rem; transform: rotate(3deg); }
.trait s.x { width: 3px; height: 2.6rem; transform: rotate(64deg); margin-left: -1.55rem; margin-right: 1.5rem; }
@media (min-width: 900px) {
  .batons { grid-template-columns: repeat(3, 1fr); border-top: 0; }
  .batons li { border-top: 2px solid var(--copie); border-bottom: 0; padding: 1rem 0 1.4rem; }
}

/* ——— Atelier en photos ——— */
.cadre { position: relative; margin: 0; }
.cadre img { width: 100%; height: clamp(22rem, 72vh, 46rem); object-fit: cover; object-position: center 55%; }
.coin {
  position: absolute; margin: 0;
  background: var(--imprime); color: var(--copie);
  padding: .35rem .65rem; font-size: .875rem; font-weight: 650; line-height: 1.3;
}
.coin--hg { top: var(--gouttiere); left: var(--gouttiere); }
.coin--hd { top: var(--gouttiere); right: var(--gouttiere); }
.coin--bg { bottom: var(--gouttiere); left: var(--gouttiere); }
.coin--bd { padding: .65rem .9rem; bottom: var(--gouttiere); right: var(--gouttiere); background: var(--tampon); color: var(--original); text-decoration: none; }
.coin--bd:hover { background: var(--tampon-fonce); }
@media (max-width: 520px) {
  .coin { font-size: .8125rem; }
  .coin--hg, .coin--hd { top: .75rem; } .coin--hg, .coin--bg { left: .75rem; }
  .coin--hd, .coin--bd { right: .75rem; } .coin--bg, .coin--bd { bottom: .75rem; }
  .coin--hd { display: none; }
}
.bande {
  list-style: none; margin: 0; padding: 2.5rem var(--gouttiere) .5rem;
  display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory;
  justify-content: flex-start;
}
.bande li { flex: none; scroll-snap-align: center; }
.bande figure { margin: 0; }
.bande li:nth-child(1) figure { transform: rotate(-2.2deg); }
.bande li:nth-child(2) figure { transform: rotate(1.6deg) translateY(.8rem); }
.bande li:nth-child(3) figure { transform: rotate(-1deg); }
.bande img { height: clamp(14rem, 34vw, 22rem); width: auto; border: 7px solid var(--original); }
.bande figcaption { font-family: var(--main-f); color: var(--bille); font-size: 1.15em; margin-top: .3rem; }
@media (min-width: 900px) { .bande { justify-content: center; overflow: visible; } }

/* ——— Avis : la page d'observations ——— */
.avis { max-width: none; }
.avis > * { max-width: 78rem; margin-left: auto; margin-right: auto; }
.observations {
  background-color: var(--original);
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(2rem - 1px), rgba(29, 60, 158, .16) calc(2rem - 1px) 2rem);
  background-position: 0 1.5rem;
  border: 1.5px solid var(--imprime);
  padding: 1.5rem clamp(1.1rem, 3vw, 2.5rem) .5rem;
}
.obs { margin: 0 0 2rem; break-inside: avoid; }
.obs .ecrit { font-size: 1.28rem; line-height: 2rem; }
.obs footer { line-height: 2rem; font-weight: 650; font-stretch: 90%; }
.langue { font-weight: 400; font-style: italic; }
.obs details { line-height: 2rem; }
.obs summary { cursor: pointer; color: var(--imprime); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; width: fit-content; }
.obs details p { color: var(--imprime); }
.avis__lien { margin-top: 1.5rem; font-weight: 700; }
@media (min-width: 900px) {
  .observations { columns: 2; column-gap: 4rem; column-rule: 1px solid var(--imprime-doux); }
}

/* ——— Accès ——— */
.acces { padding-bottom: var(--section); }
.acces__grille { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
@media (max-width: 359px) { .horaires th, .horaires td { padding-inline: .25rem; font-size: .9375rem; } }
.bon--horaires { padding: 1.25rem clamp(1.1rem, 3vw, 2rem) 1.75rem; }
.bon--horaires .plaque { margin-bottom: 1rem; }
.horaires { width: 100%; border-collapse: collapse; border-top: 2px solid var(--imprime); }
.horaires th, .horaires td { white-space: nowrap; padding: .55rem .5rem; border-bottom: 1px solid var(--imprime-doux); text-align: left; }
.horaires th { font-weight: 650; padding-left: 0; }
.horaires td { color: var(--bille); }
.horaires .ferme td { font-family: var(--main-f); font-size: 1.15em; padding-block: .35rem; }
.horaires tr.aujourdhui { background: var(--copie); }
.horaires tr.aujourdhui th { font-weight: 850; padding-left: .5rem; }
.horaires tr.aujourdhui th::after { content: "aujourd'hui"; display: block; line-height: 1.1; font-weight: 400; font-family: var(--main-f); color: var(--bille); }
.note { margin: 1rem 0 1.25rem; max-width: 52ch; }
.champs--infos { border-top: 2px solid var(--imprime); margin-bottom: 1.5rem; }
.champs--infos .champ dt { font-size: var(--taille); }
.champs--infos a { overflow-wrap: anywhere; }
.carte { border: 1.5px solid var(--imprime); min-height: 22rem; background: var(--original); }
.carte iframe { display: block; width: 100%; height: 100%; min-height: 22rem; border: 0; }
@media (min-width: 900px) { .acces__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }

/* ——— Pied ——— */
.pied {
  background: var(--bitume); color: var(--original);
  padding: clamp(3rem, 7vw, 5rem) var(--gouttiere) 6rem;
}
.pied > * { max-width: 78rem; margin-left: auto; margin-right: auto; }
.pied p + p { margin-top: .35rem; }
.pied__nom {
  color: var(--copie);
  font-size: clamp(2.2rem, 7vw, 5rem); font-weight: 900; font-stretch: 125%; line-height: .95; letter-spacing: -.02em;
  margin-bottom: 1.25rem !important;
}
.pied a { color: var(--original); }
.pied__demo { margin-top: 1.5rem !important; opacity: .7; font-size: .875rem; }

/* ——— Barre mobile ——— */
.barre-mobile {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: 1.4fr 1fr;
  background: var(--bitume);
  padding-bottom: env(safe-area-inset-bottom);
}
.barre-mobile a {
  display: grid; place-items: center; min-height: 3.6rem;
  color: var(--original); font-weight: 750; text-decoration: none;
}
.barre-mobile__appel { background: var(--tampon); }
@media (min-width: 900px) {
  .barre-mobile { display: none; }
  .pied { padding-bottom: clamp(3rem, 7vw, 5rem); }
}

/* ——— États avant animation (seulement si JS et mouvement autorisés) ——— */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .accueil .ecrit { clip-path: inset(0 100% 0 0); animation: devoile 0s 3s forwards; }
  .accueil .tampon { opacity: 0; animation: tamponne 0s 3s forwards; }
}
@keyframes devoile { to { clip-path: inset(0 0 0 0); } }
@keyframes tamponne { to { opacity: .9; } }
.cases { display: inline-block; }