/* Coffee & Mo
   Mise en page : la page est construite comme le cart. Des panneaux noir mat
   encadrés de cèdre pour les moments forts (accueil, carte, contact), des
   sections blanc porcelaine pour lire, et un plateau en cèdre qui sépare les
   deux, comme le plateau du meuble sur lequel pose la machine. */

@font-face {
  font-family: "Young Serif";
  src: url("assets/fonts/young-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs relevées sur le vrai cart */
  --noir: #1f1d1b;            /* panneau noir mat */
  --noir-profond: #171615;    /* creux de la machine, pied de page */
  --halo: #36312d;            /* lumière d'ambiance derrière le bike */
  --cedre: #a5482a;           /* plateau en cèdre teinté */
  --cedre-clair: #c2613c;
  --porcelaine: #fafaf7;      /* tasses */
  --acier: #b4b8ba;           /* inox de la machine */
  --acier-clair: #d7d9da;     /* texte secondaire sur noir */
  --gris-texte: #4b4f51;      /* texte secondaire sur porcelaine */
  --filet-clair: #dddcd6;     /* séparateurs sur porcelaine */
  --filet-sombre: rgba(180, 184, 186, 0.24);
  --creme: #e6b98a;           /* crema : liens et focus sur noir */
  --champ: #2a2725;           /* fond des champs du formulaire */

  /* Typographie : Young Serif pour la voix de la marque, Bricolage pour lire */
  --font-marque: "Young Serif", Georgia, "Times New Roman", serif;
  --font-texte: "Bricolage Grotesque", "Segoe UI", Roboto, system-ui, sans-serif;

  --gouttiere: clamp(1rem, 4vw, 2.5rem);
  --largeur: 72rem;
  --hauteur-entete: 4.25rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* L'attribut hidden doit gagner contre nos display: grid / flex */
[hidden] {
  display: none !important;
}

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--noir);
  color: var(--porcelaine);
  font-family: var(--font-texte);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-optical-sizing: auto;
}

@media (min-width: 48rem) {
  body {
    font-size: 1.125rem;
  }
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-marque);
  font-weight: 400;
  line-height: 1.1;
  text-wrap: balance;
}

p,
dl,
dd {
  margin: 0;
}

p {
  text-wrap: pretty;
}

[id] {
  scroll-margin-top: calc(var(--hauteur-entete) + 1rem);
}

:focus-visible {
  outline: 3px solid var(--creme);
  outline-offset: 3px;
}

.clair :focus-visible {
  outline-color: var(--cedre);
}

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  /* sur iPhone à l'horizontale, le contenu reste à l'écart de l'encoche */
  padding-left: max(var(--gouttiere), env(safe-area-inset-left, 0px));
  padding-right: max(var(--gouttiere), env(safe-area-inset-right, 0px));
}

.aller-au-contenu {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 30;
  padding: 0.75rem 1rem;
  background: var(--porcelaine);
  color: var(--noir);
  font-weight: 600;
}

.aller-au-contenu:focus {
  top: 1rem;
}

/* Lu par les lecteurs d'écran, invisible à l'écran */
/* une adresse e-mail ne se coupe jamais au tiret : on croirait à une
   césure et on l'oublierait en recopiant */
.insecable {
  white-space: nowrap;
}

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

/* Boutons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  font: 600 1rem/1.2 var(--font-texte);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.08s ease;
}

/* Sous le doigt, le bouton s'enfonce d'un pixel comme une planche qu'on presse */
.btn:active {
  transform: translateY(1px);
}

/* Le bouton principal est une planche de cèdre, comme le plateau du cart. */
.btn-cedre {
  color: var(--porcelaine);
  background:
    linear-gradient(rgba(70, 24, 10, 0.24), rgba(70, 24, 10, 0.24)),
    url("assets/cedre.svg") center / cover,
    var(--cedre);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -2px 0 rgba(0, 0, 0, 0.32);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

.btn-cedre:hover {
  filter: brightness(1.1);
}

.btn-cedre:active {
  filter: brightness(0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 2px 6px rgba(0, 0, 0, 0.35);
}

.btn-contour {
  color: var(--porcelaine);
  background: transparent;
  box-shadow: inset 0 0 0 1.5px rgba(250, 250, 247, 0.55);
}

.btn-contour:hover {
  box-shadow: inset 0 0 0 1.5px var(--porcelaine);
}

.btn-grand {
  min-height: 3.5rem;
  padding-inline: 1.75rem;
  font-size: 1.0625rem;
}

/* En-tête ------------------------------------------------------------- */

.entete {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 10;
  background: var(--noir);
  border-bottom: 1px solid var(--filet-sombre);
}

.entete .conteneur {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--hauteur-entete);
}

.logo img {
  width: 9.5rem;
}

.nav {
  display: none;
}

.nav a,
.entete-tel,
.lang {
  color: var(--acier-clair);
  font-size: 0.9375rem;
  text-decoration: none;
}

.nav a:hover,
.entete-tel:hover,
.lang:hover {
  color: var(--porcelaine);
}

.entete-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-left: auto;
}

.lang {
  position: relative;
  padding: 0.3rem 0.55rem;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(180, 184, 186, 0.4);
}

/* l'étiquette reste discrète, mais la zone qu'on touche dépasse 44 px */
.lang::after {
  content: "";
  position: absolute;
  inset: -0.65rem;
}

.entete-tel,
.entete .btn {
  display: none;
}

@media (min-width: 48rem) {
  .entete .btn {
    display: inline-flex;
    min-height: 2.75rem;
  }
}

@media (min-width: 62rem) {
  .nav {
    display: flex;
    flex: 1;
    justify-content: center;
    gap: 1.75rem;
  }
}

@media (min-width: 76rem) {
  .entete-tel {
    display: inline;
    font-variant-numeric: tabular-nums;
  }
}

/* Accueil -------------------------------------------------------------
   Sur téléphone, la photo du coffee bike passe en premier, d'un bord à
   l'autre de l'écran : c'est elle qu'on doit voir en arrivant, puis la
   promesse et les boutons. Sur grand écran, le texte à gauche et la photo
   en grand à droite. Le texte n'est jamais posé sur la photo : il reste
   lisible quelle que soit l'image. */

.hero {
  overflow: hidden;
  background:
    url("assets/grain.svg") 0 0 / 220px 220px,
    radial-gradient(70% 85% at 74% 62%, var(--halo) 0%, var(--noir) 70%);
}

.hero .conteneur {
  display: grid;
  gap: 1.25rem;
  padding-block: 1.25rem 2.75rem;
}

.hero-texte {
  display: grid;
  gap: 1.25rem;
  min-width: 0;
}

.hero h1 {
  font-size: clamp(2.25rem, 5.6vw, 4.25rem);
  letter-spacing: -0.012em;
}

.intro {
  max-width: 33rem;
  color: var(--acier-clair);
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.actions .btn {
  flex: 1 1 13rem;
}

@media (min-width: 40rem) {
  .actions .btn {
    flex: 0 0 auto;
  }

  .hero h1 {
    max-width: 12ch;
  }
}

.rassurance {
  color: var(--acier);
  font-size: 0.9375rem;
}

.hero-visuel {
  position: relative;
  min-width: 0;
  margin: -1.25rem calc(var(--gouttiere) * -1) 0;
}

.hero-photo {
  display: block;
  width: 100%;
  height: auto;
}

.velo {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 62rem) {
  .hero .conteneur {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 3rem;
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }

  .hero-texte {
    grid-column: 1;
    grid-row: 1;
    gap: 1.5rem;
  }

  .hero-visuel {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
  }

  .hero-photo {
    border-radius: 4px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  }
}

/* Photo en plein fond (classe hero-plein sur la section, version retenue
   par Rayan le 13 octobre 2026), à la manière d'Aperoccino : la photo occupe toute la largeur de l'écran,
   d'un bord à l'autre, et le texte vient dessous, centré. Elle n'est jamais
   recouverte : la personne est à gauche et le bike à droite, il n'y a pas
   de place libre pour un texte lisible sur l'image. */

.hero-plein .conteneur {
  padding-top: 0;
}

.hero-plein .hero-visuel {
  margin: 0 calc(50% - 50vw);
}

.hero-plein .hero-photo {
  height: min(64svh, 133vw);
  object-fit: cover;
  object-position: 27% 45%;
}

.hero-plein .hero-texte {
  justify-items: start;
}

@media (min-width: 62rem) {
  .hero-plein .conteneur {
    grid-template-columns: none;
    gap: clamp(2rem, 4vw, 3.5rem);
    padding-block: 0 clamp(3rem, 6vw, 5rem);
  }

  .hero-plein .hero-visuel {
    grid-column: auto;
    grid-row: 1;
    margin: 0 calc(50% - 50vw);
  }

  .hero-plein .hero-photo {
    height: calc(100svh - var(--hauteur-entete) - 9rem);
    min-height: 26rem;
    max-height: 56vw;
    border-radius: 0;
    box-shadow: none;
    object-position: 50% 12%;
  }

  .hero-plein .hero-texte {
    grid-row: 2;
    justify-items: center;
    text-align: center;
  }

  .hero-plein h1 {
    max-width: 18ch;
  }

  .hero-plein .intro {
    max-width: 40rem;
  }

  .hero-plein .actions {
    justify-content: center;
  }
}

/* Le coffee bike arrive et prépare un café ------------------------------
   Le seul mouvement de la page, une petite histoire d'une quinzaine de
   secondes, qui se lit de gauche à droite sur le comptoir :
   1. le bike entre par la droite, roues et pédalier tournent, il freine ;
   2. le moulin moud : il vibre, les grains baissent, l'écran compte, la
      mouture tombe dans le porte-filtre ;
   3. le porte-filtre file jusqu'à la machine et s'enclenche sous le groupe ;
   4. l'aiguille du manomètre monte, l'espresso coule, les tasses se remplissent ;
   5. une tasse glisse sur le comptoir, à droite de la machine, et la vapeur monte.
   Aucune main : seuls les objets bougent. Chaque pièce est dessinée dans son
   état final et son animation part de l'état « avant ». Si l'appareil demande
   de limiter les animations, on voit donc directement l'image finale.
   Les positions (en unités du dessin) viennent de tools/build_illustrations.py. */

.velo {
  animation: arrivee 1.9s cubic-bezier(0.2, 0.7, 0.25, 1) 0.2s both;
}

.velo .rayons {
  transform-box: fill-box;
  transform-origin: center;
  animation: roule 1.9s cubic-bezier(0.2, 0.7, 0.25, 1) 0.2s both;
}

.velo .pedalier {
  transform-box: view-box;
  transform-origin: 432px 350px;
  animation: pedale 1.9s cubic-bezier(0.2, 0.7, 0.25, 1) 0.2s both;
}

/* le moulin tourne 3,6 s (45 vibrations de 0,08 s) */
.velo .moulin,
.velo .pf-vibre {
  animation: vibre 0.08s linear 3s 45;
}

.velo .grains {
  transform: translateY(5px);
  animation: grains 3.6s ease-in 3s both;
}

/* l'écran du moulin compte la mouture : un segment de plus chaque seconde */
.velo .seg1,
.velo .seg2,
.velo .seg3 {
  animation: segment 0.01s step-end 3.9s both;
}

.velo .seg2 {
  animation-delay: 4.9s;
}

.velo .seg3 {
  animation-delay: 5.9s;
}

.velo .mouture {
  opacity: 0;
  animation:
    mouture 3.6s linear 3s both,
    mouture-coule 0.2s linear 3s 18;
}

.velo .dose {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: dose 3.2s ease-out 3.2s both;
}

/* du moulin (panier centré en 81, 110) au premier groupe de la machine */
.velo .pf-voyage {
  transform-box: view-box;
  transform-origin: 81px 110px;
  transform: translate(80.333px, -13.5px) rotate(0deg);
  animation: porte-filtre 2.2s linear 7.2s both;
}

.velo .aiguille {
  transform-box: view-box;
  transform-origin: 128px 62px;
  animation: pression 0.8s ease-out 9.6s both;
}

.velo .filet {
  stroke-dasharray: 10 10;
  stroke-dashoffset: -10;
  animation: filet 3.6s linear 10.2s both;
}

.velo .remplit {
  transform-box: fill-box;
  transform-origin: center;
  animation: remplit 3.2s ease-out 10.5s both;
}

/* de l'égouttoir au comptoir, à droite de la machine */
.velo .servie {
  transform: translate(121.667px, 15px);
  animation: servie 2.4s 14.3s both;
}

.velo .vapeur {
  opacity: 0.45;
  animation: vapeur 3.2s ease-in-out 16.9s infinite backwards;
}

.velo .v1 {
  animation-delay: 17.95s;
}

.velo .v2 {
  animation-delay: 19s;
}

@keyframes arrivee {
  from {
    transform: translateX(100vw);
  }
  to {
    transform: none;
  }
}

/* le bike roule vers la gauche : roues et pédalier tournent à l'envers des aiguilles d'une montre */
@keyframes roule {
  from {
    transform: rotate(3turn);
  }
  to {
    transform: none;
  }
}

@keyframes pedale {
  from {
    transform: rotate(1.25turn);
  }
  to {
    transform: none;
  }
}

@keyframes vibre {
  25% {
    transform: translate(-0.35px, 0.15px);
  }
  75% {
    transform: translate(0.35px, -0.15px);
  }
}

@keyframes grains {
  from {
    transform: translateY(0);
  }
}

@keyframes segment {
  from {
    fill: #3a3633;
  }
}

@keyframes mouture {
  0%,
  100% {
    opacity: 0;
  }
  4%,
  96% {
    opacity: 1;
  }
}

@keyframes mouture-coule {
  to {
    stroke-dashoffset: -2.4;
  }
}

@keyframes dose {
  from {
    transform: scaleY(0);
  }
}

/* il glisse de la fourche, file sous le groupe, monte et tourne pour s'enclencher */
@keyframes porte-filtre {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
    animation-timing-function: ease-in-out;
  }
  14% {
    transform: translate(5px, 3px) rotate(0deg);
    animation-timing-function: ease-in;
  }
  45% {
    transform: translate(41px, -5px) rotate(-4deg);
    animation-timing-function: ease-out;
  }
  76% {
    transform: translate(80.333px, -9.5px) rotate(-10deg);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translate(80.333px, -13.5px) rotate(0deg);
  }
}

@keyframes pression {
  from {
    transform: rotate(-150deg);
  }
}

/* le filet descend du bec, coule, puis ses dernières gouttes tombent dans la tasse */
@keyframes filet {
  0% {
    stroke-dashoffset: 10;
  }
  12%,
  88% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -10;
  }
}

@keyframes remplit {
  from {
    opacity: 0;
    transform: scale(0.25);
  }
}

/* elle se soulève de l'égouttoir, glisse devant le second groupe, puis se pose */
@keyframes servie {
  0% {
    transform: translate(0px, 0px);
    animation-timing-function: ease-out;
  }
  12% {
    transform: translate(3px, -3px);
    animation-timing-function: ease-in-out;
  }
  72% {
    transform: translate(102px, -3px);
    animation-timing-function: ease-in-out;
  }
  100% {
    transform: translate(121.667px, 15px);
  }
}

@keyframes vapeur {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  35% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
    transform: translateY(-16px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .velo,
  .velo * {
    animation: none !important;
  }
}

/* Le plateau en cèdre qui sépare les grandes parties de la page */
.plateau {
  height: clamp(1.25rem, 2.2vw, 1.75rem);
  background: url("assets/cedre.svg") center / cover, var(--cedre);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

/* Sections ------------------------------------------------------------ */

.section {
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}

.clair {
  background: var(--porcelaine);
  color: var(--noir);
}

/* Le noir mat des panneaux du cart : un grain très léger, presque invisible,
   qui évite l'aplat numérique. Le cèdre a déjà sa texture de bois. */
.sombre {
  background: url("assets/grain.svg") 0 0 / 220px 220px, var(--noir);
  color: var(--porcelaine);
}

.section h2 {
  font-size: clamp(2rem, 4.4vw, 3rem);
}

.tete {
  display: grid;
  gap: 1rem;
  max-width: 40rem;
  margin-bottom: clamp(2rem, 4.5vw, 3.25rem);
}

.chapo {
  color: var(--gris-texte);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
}

.sombre .chapo {
  color: var(--acier-clair);
}

/* Deux sections claires qui se suivent forment une seule zone de lecture */
.section.clair + .section.clair {
  padding-top: 0;
}

/* Événements */
.colonnes {
  display: grid;
  gap: 2rem;
}

.colonnes h3 {
  margin-bottom: 0.6rem;
  font-size: 1.75rem;
}

.colonnes p {
  max-width: 34ch;
  color: var(--gris-texte);
}

@media (min-width: 52rem) {
  .colonnes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* Le slogan, en grand sous une bande de guirlandes floues : il doit se lire
   d'un coup d'œil. Les guirlandes restent au-dessus du texte, jamais derrière :
   une ampoule est aussi claire que les lettres, et le texte ne s'y lirait plus.
   Le décor vient de tools/build_nuit.cjs ; le bas de l'image est déjà la
   couleur unie du fond de la section. */
.nuit {
  /* hauteur du décor, qui garde ses proportions sur toute la largeur */
  --decor: calc(100vw * 4 / 5);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* le texte commence à 62 % du décor, sous la dernière guirlande */
  padding-top: calc(var(--decor) * 0.62);
  background: #161412;
}

.nuit-fond {
  position: absolute;
  inset: 0 0 auto;
  z-index: -2;
}

.nuit-fond img {
  display: block;
  width: 100%;
  height: auto;
}

/* le grain noir mat passe une seule fois sur le décor et sur le fond */
.nuit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("assets/grain.svg") 0 0 / 220px 220px;
}

.nuit-contenu {
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}

/* un halo sombre détache les lettres de la lueur des guirlandes, juste au-dessus */
.nuit h2 {
  font-size: clamp(2.5rem, 12.5vw, 6.5rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-shadow: 0 0.04em 0.45em rgba(15, 13, 12, 0.6);
}

.nuit h2 em {
  display: block;
  color: var(--creme);
  font-style: normal;
}

.nuit p {
  max-width: 40ch;
  color: var(--porcelaine);
  font-size: clamp(1.375rem, 2.6vw, 2rem);
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
}

/* la phrase se coupe à la virgule, jamais au milieu d'un groupe de mots ;
   une moitié trop longue se partage en deux lignes égales */
.nuit p span {
  display: inline-block;
}

.nuit .btn {
  margin-top: 0.75rem;
}

/* dès qu'il y a de la largeur, un décor en bandeau, 4 fois plus large que haut */
@media (min-width: 36rem) {
  .nuit {
    --decor: calc(100vw / 4);
  }
}

/* Formules : chaque carte est un petit cart, plateau en cèdre compris */
.formules {
  display: grid;
  gap: 2.5rem 1.75rem;
}

@media (min-width: 54rem) {
  .formules {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.formule,
.atelier {
  position: relative;
  margin-top: 0.75rem;
  padding: 2.25rem clamp(1.25rem, 3vw, 2.25rem) 2.5rem;
  color: var(--porcelaine);
  background: radial-gradient(80% 55% at 50% 22%, var(--halo), var(--noir-profond) 78%);
  box-shadow:
    inset 0.5rem 0 0 var(--cedre),
    inset -0.5rem 0 0 var(--cedre),
    inset 0 -0.75rem 0 var(--cedre);
}

/* sur ces cartes noires, le contour de focus reprend la crema */
.formule :focus-visible,
.atelier :focus-visible {
  outline-color: var(--creme);
}

.formule {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.formule::before,
.atelier::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: -0.5rem;
  right: -0.5rem;
  height: 1rem;
  background: url("assets/cedre.svg") center / cover, var(--cedre);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.18),
    inset 0 -2px 0 rgba(0, 0, 0, 0.35);
}

.formule-visuel {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: clamp(10rem, 22vw, 13rem);
  margin-bottom: 0.5rem;
}

.formule-visuel img {
  width: auto;
  max-height: 100%;
}

/* le bike animé : il arrive de la droite, hors de la carte */
.formule-visuel:has(.velo) {
  overflow: hidden;
}

.formule-visuel .velo {
  width: auto;
  max-width: 100%;
  height: 100%;
}

/* son histoire attend qu'on le voie (main.js) */
.velo.en-attente,
.velo.en-attente * {
  animation-play-state: paused !important;
}

.formule h3 {
  font-size: 2rem;
}

.formule p {
  color: var(--acier-clair);
}

.specs {
  display: grid;
  gap: 0.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet-sombre);
}

.specs div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: baseline;
}

.specs dt {
  color: var(--acier);
  font-size: 0.9375rem;
}

.specs dd {
  font-weight: 600;
}

.formule .btn {
  align-self: flex-start;
  margin-top: auto;
}

.specs {
  margin-bottom: 0.75rem;
}

/* L'affiche personnalisée : un aperçu en direct sur la façade du bar.
   Sur téléphone : le titre, l'aperçu, puis les deux façons de faire.
   Sur ordinateur, l'aperçu passe à droite. */
.atelier-grille {
  display: grid;
  gap: 2.5rem;
}

.atelier-grille .tete {
  margin-bottom: 0;
}

@media (min-width: 62rem) {
  .atelier-grille {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "tete atelier"
      "options atelier";
    gap: 2.5rem 4rem;
    align-items: start;
  }

  .atelier-grille .tete {
    grid-area: tete;
  }

  .atelier {
    grid-area: atelier;
  }

  .atelier-options {
    grid-area: options;
  }
}

.atelier {
  display: grid;
  gap: 1.75rem;
}

/* sur tablette, l'aperçu ne grandit pas au-delà d'une belle taille */
.atelier-apercu {
  position: relative;
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}

.atelier-apercu img {
  width: 100%;
}

/* l'aperçu n'est qu'une simulation : on le dit juste sous l'image */
.apercu-note {
  max-width: 34rem;
  margin: -0.75rem auto 0;
  color: var(--acier-clair);
  font-size: 0.9375rem;
  text-align: center;
  text-wrap: balance;
}

.apercu-note strong {
  color: var(--porcelaine);
}

/* L'affiche se pose dans le panneau noir de facade.svg (x 60 à 310 et
   y 160 à 272 dans une image de 314 × 296, en partant de 28, 2). Le texte
   suit sa taille grâce aux unités cqw et cqh, et main.js le réduit encore
   (--ajuste) quand des prénoms longs ne tiennent pas. */
.affiche {
  position: absolute;
  left: 10.19%;
  top: 53.38%;
  width: 79.62%;
  height: 37.84%;
  container-type: size;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 3.5% 5%;
  overflow: hidden;
  background: var(--fond, #a3b49a);
  color: var(--texte, #1c2619);
  text-align: center;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* un filet fin à l'intérieur, comme sur un faire-part */
.affiche::after {
  content: "";
  position: absolute;
  inset: 7% 3.5%;
  border: 1px solid currentColor;
  opacity: 0.4;
  pointer-events: none;
}

/* Les tailles en rem servent aux navigateurs qui ignorent cqw et cqh. */
.affiche-occasion,
.affiche-date {
  font-size: 0.625rem;
  font-size: calc(min(4.8cqw, 12cqh) * var(--ajuste, 1));
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.affiche-noms {
  margin-block: 0.1em 0.2em;
  font-family: var(--font-marque);
  font-size: 1.5rem;
  font-size: calc(min(13cqw, 30cqh) * var(--ajuste, 1));
  line-height: 1.05;
  text-wrap: balance;
}

/* le logo d'une entreprise prend la place du nom, sans jamais déborder */
.affiche-logo {
  width: auto;
  max-width: 72%;
  height: 3.5rem;
  height: calc(44cqh * var(--ajuste, 1));
  margin-block: 0.35em 0.55em;
  object-fit: contain;
}

.affiche-date::before {
  content: "";
  display: block;
  width: 2.5em;
  height: 1px;
  margin: 0 auto 0.6em;
  background: currentColor;
  opacity: 0.6;
}

/* Les cinq couleurs de l'affiche, partagées avec les pastilles */
[data-couleur="porcelaine"] {
  --fond: #fafaf7;
  --texte: #1f1d1b;
}

[data-couleur="champagne"] {
  --fond: #e8d6b0;
  --texte: #3a2a17;
}

[data-couleur="sauge"] {
  --fond: #a3b49a;
  --texte: #1c2619;
}

[data-couleur="rose"] {
  --fond: #e6c2ba;
  --texte: #3b1f1c;
}

[data-couleur="nuit"] {
  --fond: #22304a;
  --texte: #f1e4cc;
}

.atelier-outils {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .atelier-outils {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Le logo : notre propre bouton, dans la langue de la page (celui du
   navigateur parle la langue du navigateur). Le vrai champ reste caché,
   et son contour de focus passe sur le bouton. */
.ligne-fichier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
}

.champ .bouton-fichier {
  min-height: 2.75rem;
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
}

.ligne-fichier:has(input:focus-visible) .bouton-fichier {
  outline: 2px solid var(--creme);
  outline-offset: 2px;
}

.nom-fichier {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  color: var(--acier-clair);
  font-size: 0.9375rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.retirer {
  padding: 0.5rem 0;
  border: 0;
  background: none;
  color: var(--creme);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}

.aide {
  color: var(--acier-clair);
  font-size: 0.875rem;
}

.aide.erreur {
  color: var(--creme);
  font-weight: 600;
}

.nuancier legend span {
  color: var(--acier-clair);
  font-weight: 400;
}

.nuancier .pastilles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

/* Chaque pastille est un bouton radio rond de 44 px, assez grand pour le doigt */
.nuancier .pastilles label {
  position: relative;
  width: 2.75rem;
  min-height: 0;
  height: 2.75rem;
  padding: 0;
  border-radius: 50%;
  background: var(--fond);
  box-shadow: inset 0 0 0 1px rgba(250, 250, 247, 0.3);
}

.nuancier .pastilles input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 50%;
  opacity: 0;
  cursor: pointer;
}

.nuancier .pastilles label:has(input:checked) {
  background: var(--fond);
  box-shadow:
    0 0 0 3px var(--noir-profond),
    0 0 0 5px var(--creme);
}

.nuancier .pastilles label:has(:focus-visible) {
  outline: 3px solid var(--creme);
  outline-offset: 7px;
}

.atelier-options {
  display: grid;
  gap: 1.75rem;
}

.atelier-options > div {
  padding-top: 1.1rem;
  border-top: 2px solid var(--cedre);
}

.atelier-options h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.atelier-options p {
  max-width: 40ch;
  color: var(--gris-texte);
}

@media (min-width: 40rem) {
  .atelier-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }
}

@media (min-width: 62rem) {
  .atelier-options {
    grid-template-columns: none;
    gap: 1.75rem;
  }
}

/* La carte des boissons */
.carte-grille {
  display: grid;
  gap: 2.5rem;
}

.carte-grille .tete {
  margin-bottom: 0;
}

.lait {
  justify-self: start;
  padding: 0.6rem 0.9rem;
  color: var(--porcelaine);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--cedre-clair);
  background: rgba(250, 250, 247, 0.06);
}

.menu {
  display: grid;
}

.menu div {
  display: grid;
  align-content: start; /* le texte reste collé au titre même si la voisine est plus longue */
  gap: 0.3rem;
  padding-block: 1.15rem;
  padding-left: 4.5rem;
  border-top: 1px solid var(--filet-sombre);
  /* longhands : le raccourci « background » effacerait l'image posée par .b-… */
  background-repeat: no-repeat;
  background-position: 0 1.05rem;
  background-size: 3.5rem 2.5rem;
}

/* Chaque boisson a son dessin, à la taille de sa tasse : l'espresso est
   petit, le latte large. On repère sa boisson d'un coup d'œil. */
.b-espresso {
  background-image: url("assets/illustrations/boissons/espresso.svg");
}

.b-cafe {
  background-image: url("assets/illustrations/boissons/cafe.svg");
}

.b-cappuccino {
  background-image: url("assets/illustrations/boissons/cappuccino.svg");
}

.b-latte {
  background-image: url("assets/illustrations/boissons/latte.svg");
}

.b-chocolat {
  background-image: url("assets/illustrations/boissons/chocolat.svg");
}

.b-the {
  background-image: url("assets/illustrations/boissons/the.svg");
}

.menu dt {
  font-family: var(--font-marque);
  font-size: 1.5rem;
  line-height: 1.2;
}

.menu dd {
  color: var(--acier-clair);
}

@media (min-width: 40rem) {
  .menu {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 2.5rem;
  }
}

@media (min-width: 62rem) {
  .carte-grille {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    gap: 4rem;
    align-items: start;
  }
}

/* Les photos des boissons, posées à même le panneau noir. Une photo 3:2 dans
   une colonne 3fr et une photo carrée dans une colonne 2fr ont exactement la
   même hauteur : pas besoin de recadrer sur grand écran. */
.photos {
  display: grid;
  gap: 0.5rem;
}

.photos img {
  width: 100%;
}

/* Sur téléphone, les photos s'empilent : le latte passe au format de
   l'espresso, recadré sur la tasse et le filet de lait. */
.photo-latte {
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 62%;
}

@media (min-width: 40rem) {
  .photos {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  }

  .photo-latte {
    aspect-ratio: 1;
  }
}

@media (min-width: 62rem) {
  .photos {
    grid-column: 1 / -1;
  }
}

/* Étapes : une vraie suite, donc numérotée */
.etapes {
  display: grid;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: etape;
}

.etapes li {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  counter-increment: etape;
}

.etapes li::before {
  content: counter(etape);
  color: var(--cedre);
  font-family: var(--font-marque);
  font-size: 3.25rem;
  line-height: 1;
}

.etapes h3 {
  font-size: 1.5rem;
}

.etapes p {
  max-width: 34ch;
  color: var(--gris-texte);
}

@media (min-width: 52rem) {
  .etapes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3rem;
  }
}

/* Questions */
.faq-grille {
  display: grid;
  gap: 1.5rem;
}

.faq details {
  border-top: 1px solid var(--filet-clair);
}

.faq details:last-child {
  border-bottom: 1px solid var(--filet-clair);
}

.faq summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 1.15rem;
  font-size: 1.125rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  flex: none;
  color: var(--cedre);
  font-family: var(--font-marque);
  font-size: 1.6rem;
  line-height: 1;
  transition: transform 0.2s ease;
}

.faq details[open] summary::after {
  transform: rotate(45deg);
}

.faq details p {
  max-width: 40rem;
  padding-bottom: 1.25rem;
  color: var(--gris-texte);
}

@media (prefers-reduced-motion: reduce) {
  .faq summary::after {
    transition: none;
  }
}

@media (min-width: 62rem) {
  .faq-grille {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr);
    gap: 4rem;
  }
}

/* Contact et demande de devis ----------------------------------------- */

.contact-grille {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 62rem) {
  .contact-grille {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.45fr);
    gap: 4rem;
    align-items: start;
  }
}

/* site vitrine avant le lancement : pas de formulaire, le contact se
   résume au téléphone, centré */
.contact-seul {
  max-width: 40rem;
  text-align: center;
}

@media (min-width: 62rem) {
  .contact-seul {
    grid-template-columns: none;
  }
}

.contact-seul .contact-intro {
  justify-items: center;
}

.contact-intro {
  display: grid;
  gap: 1rem;
}

.direct {
  display: grid;
  gap: 0.4rem;
  margin-top: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filet-sombre);
}

.direct p {
  color: var(--acier);
  font-size: 0.9375rem;
}

.direct-tel {
  font-family: var(--font-marque);
  font-size: clamp(1.75rem, 3.2vw, 2.25rem);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.direct-mail {
  color: var(--creme);
  font-size: 1.125rem;
  overflow-wrap: anywhere;
}

.formulaire {
  display: grid;
  gap: 1.5rem;
  min-width: 0;
  /* le bouton de l'affiche fait défiler jusqu'ici : rester sous l'en-tête */
  scroll-margin-top: calc(var(--hauteur-entete) + 1.5rem);
}

.champs {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 40rem) {
  .champs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.champ {
  display: grid;
  gap: 0.4rem;
  min-width: 0;
}

.champ-large {
  grid-column: 1 / -1;
}

.champ label,
.choix legend {
  font-size: 0.9375rem;
  font-weight: 600;
}

.facultatif {
  color: var(--acier);
  font-weight: 400;
}

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(180, 184, 186, 0.38);
  border-radius: 0;
  background-color: var(--champ);
  color: var(--porcelaine);
  font: inherit;
  font-size: 1rem;
  color-scheme: dark;
}

.champ input::placeholder,
.champ textarea::placeholder {
  color: #8d9193;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 2px solid var(--creme);
  outline-offset: 1px;
}

.champ select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23b4b8ba' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.95rem center;
}

.champ textarea {
  min-height: 7.5rem;
  resize: vertical;
}

.choix {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  border: 0;
}

.choix legend {
  margin-bottom: 0.6rem;
  padding: 0;
}

.choix-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.choix label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.6rem 1rem;
  box-shadow: inset 0 0 0 1px rgba(180, 184, 186, 0.38);
  font-size: 1rem;
  cursor: pointer;
}

.choix input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0;
  accent-color: var(--cedre-clair);
}

.choix label:has(input:checked) {
  background: rgba(165, 72, 42, 0.28);
  box-shadow: inset 0 0 0 1.5px var(--cedre-clair);
}

.envoi {
  display: grid;
  gap: 1rem;
}

@media (min-width: 40rem) {
  .envoi {
    justify-items: start;
  }
}

.mention {
  color: var(--acier);
  font-size: 0.875rem;
}

.mention a {
  color: var(--creme);
}

.piege {
  display: none;
}

.form-etat {
  padding: 1rem 1.25rem;
  background: rgba(250, 250, 247, 0.07);
  box-shadow: inset 4px 0 0 var(--cedre-clair);
}

.form-etat strong {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--font-marque);
  font-size: 1.5rem;
  font-weight: 400;
}

.form-etat.erreur {
  box-shadow: inset 4px 0 0 var(--creme);
}

/* Pied de page -------------------------------------------------------- */

.pied {
  padding-block: 3rem;
  background: url("assets/grain.svg") 0 0 / 220px 220px, var(--noir-profond);
  color: var(--acier);
  font-size: 0.9375rem;
}

.pied-grille {
  display: grid;
  gap: 1.25rem;
}

.pied img {
  width: 8.5rem;
}

.pied nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.pied a {
  color: var(--acier-clair);
}

.copyright {
  font-size: 0.8125rem;
}

@media (min-width: 54rem) {
  .pied-grille {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 2.5rem;
  }

  .copyright {
    grid-column: 1 / -1;
  }
}

/* Barre d'action sur mobile : appeler ou demander un devis en un geste */
.barre-mobile {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: 0.5rem;
  padding: 0.6rem var(--gouttiere) calc(0.6rem + env(safe-area-inset-bottom, 0px));
  background: rgba(23, 22, 21, 0.96);
  border-top: 1px solid var(--filet-sombre);
  transition: transform 0.25s ease;
}

.barre-mobile.cachee {
  transform: translateY(110%);
}

@media (max-width: 47.99rem) {
  body {
    padding-bottom: 4.5rem;
  }
}

@media (min-width: 48rem) {
  .barre-mobile {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .barre-mobile {
    transition: none;
  }
}

/* Pages simples : merci, mentions légales ----------------------------- */

.page-simple {
  padding-block: clamp(3rem, 8vw, 5.5rem);
}

.page-simple .conteneur {
  display: grid;
  gap: 1.25rem;
  max-width: 46rem;
}

.page-simple h1 {
  font-size: clamp(2.25rem, 5vw, 3.25rem);
}

.page-simple h2 {
  margin-top: 1.5rem;
  font-size: 1.6rem;
}

.page-simple p,
.page-simple li {
  color: var(--gris-texte);
}

.page-simple ul {
  margin: 0;
  padding-left: 1.25rem;
}

.a-completer {
  padding: 0 0.3rem;
  background: #f3e3d6;
  color: var(--noir);
}