/* Étal — la vitrine.
 *
 * Conçue à 375 px d'abord, élargie ensuite : la règle du projet vaut ici
 * aussi, et un artisan qui découvre ce site le fera depuis son téléphone,
 * souvent entre deux fournées.
 *
 * Un seul parti visuel, assumé et sans thème sombre : cette page se lit une
 * fois, en plein jour, par quelqu'un qui décide s'il nous fait confiance.
 */

:root {
  --ardoise:      #16202B;  /* l'encre : ardoise bretonne, presque noire */
  --ardoise-doux: #4A5A67;
  --papier:       #F7F6F2;
  --papier-creux: #EDEBE4;
  --trait:        #DAD7CD;
  /* L'accent : ble mur, chaud sans etre orange.
     Assombri apres mesure — la premiere teinte, #B5871F, ne donnait que 3,01
     de contraste sur le papier, sous le seuil AA de 4,5 pour du texte. Elle
     etait plus jolie et illisible pour qui a la vue basse ; c'est le genre
     d'arbitrage qu'on ne fait pas a l'oeil. Celle-ci donne 4,96. */
  --ble:          #8A6414;
  --ble-clair:    #F2E6C6;
  --ble-voile:    #F6EDD8;  /* le halo derriere l'ouverture */
  --profond:      #1B3140;  /* les sections sombres */
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--ardoise);
  font-family: Karla, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -.01em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }

.dedans {
  width: 100%;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 1.35rem;
}

/* Le lien d'évitement : invisible jusqu'au premier Tab, puis bien visible.
   Quelqu'un qui navigue au clavier ne doit pas traverser la navigation à
   chaque page. */
.evitement {
  position: absolute;
  left: -9999px;
  background: var(--ardoise);
  color: var(--papier);
  padding: .8rem 1.2rem;
  z-index: 100;
  text-decoration: none;
}
.evitement:focus { left: 1rem; top: 1rem; }

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

/* ----------------------------------------------------------- en-tête */

.entete {
  border-bottom: 1px solid var(--trait);
  background: var(--papier);
  position: sticky;
  top: 0;
  z-index: 50;
}
.entete-dedans {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 60px;
}
.marque {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.7rem;
  text-decoration: none;
  letter-spacing: .01em;
  /* 44 px dans les deux sens : c'est une cible tactile, pas seulement un mot.
     Mesuré, pas suppose — « Étal » ne fait que 37 px de large a cette taille,
     et la hauteur seule ne suffit pas a le rendre attrapable au pouce. */
  display: flex;
  align-items: center;
  min-height: 44px;
  min-width: 44px;
}
.entete nav {
  display: flex;
  align-items: center;
  gap: .4rem;
}
/* `:not(.bouton)` : sans lui, cette regle gagne en specificite sur `.bouton`
   et repeint le texte du bouton d'appel en gris — 2,31 de contraste sur fond
   ardoise, presque illisible. Mesure, pas vu : au premier coup d'oeil un
   bouton sombre a texte grisatre passe pour un choix. */
.entete nav a:not(.bouton) {
  display: none;
  text-decoration: none;
  font-size: .95rem;
  padding: .6rem .7rem;
  min-height: 44px;
  align-items: center;
  color: var(--ardoise-doux);
}
.entete nav a:not(.bouton):hover { color: var(--ardoise); }
.entete nav .bouton { display: inline-flex; }

/* Le blason a cote du nom, demande par Simon : « j'aurai aime retrouver le
   logo en haut a gauche a cote d'Etal ». */
.marque {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.marque img {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: block;
}

/* Les trois ancres reviennent sur telephone, dans une seconde rangee.
   Elles etaient cachees sous 46rem faute de place sur une seule ligne, et
   Simon l'a vu : « on a que le bouton "en parler", les autres ont disparu ».
   Une page d'une seule colonne dont on ne peut atteindre aucune section
   autrement qu'en faisant defiler quatre ecrans.

   Une rangee plutot qu'un menu deroulant : trois ancres ne valent pas un
   clic de plus, et c'est deja le motif du produit — les boutiques ont leur
   « Accueil / Catalogue / Compte » sous le titre. La vitrine ressemble ainsi
   a ce qu'elle vend. */
.rubriques {
  display: none;
  border-top: 1px solid var(--trait);
  background: var(--papier);
}
.rubriques ul {
  display: flex;
  gap: .2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Si un intitule s'allonge un jour, la rangee defile au lieu de casser la
     mise en page ou de deborder la page entiere. */
  overflow-x: auto;
  scrollbar-width: none;
}
.rubriques ul::-webkit-scrollbar { display: none; }
.rubriques a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 .7rem;
  white-space: nowrap;
  font-size: .93rem;
  text-decoration: none;
  color: var(--ardoise-doux);
}
.rubriques a:hover { color: var(--ardoise); }

@media (max-width: 45.99rem) {
  .rubriques { display: block; }
}

@media (min-width: 46rem) {
  .entete nav a:not(.bouton) { display: inline-flex; }
}

/* ----------------------------------------------------------- boutons */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .75rem 1.4rem;
  background: var(--ardoise);
  color: var(--papier);
  border: 2px solid var(--ardoise);
  border-radius: 2px;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: background .15s ease, color .15s ease;
}
.bouton:hover { background: var(--profond); border-color: var(--profond); }

.bouton-creux {
  background: transparent;
  color: var(--ardoise);
}
.bouton-creux:hover { background: var(--papier-creux); color: var(--ardoise); }

.bouton-fin {
  min-height: 44px;
  padding: .45rem 1rem;
  font-size: .92rem;
}

/* --------------------------------------------------------- ouverture */

.ouverture {
  padding: 3.5rem 0 0;
  border-bottom: 1px solid var(--trait);
  background:
    radial-gradient(70rem 34rem at 82% -10%, var(--ble-voile), transparent 62%),
    var(--papier);
}

.ouverture-dedans {
  display: grid;
  gap: 2.6rem;
  padding-bottom: 0;
}

/* Trois photos plutot qu'une : c'est la promesse de la page, montree avant
   d'etre ecrite — le meme socle pour trois metiers. Elles debordent en bas de
   la section, pour que la page ne commence pas par un mur de blanc. */
.triptyque {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin: 0 -1.35rem;
  padding: 0 1.35rem;
}
.triptyque img {
  width: 100%;
  /* `height: auto` n'est pas decoratif : les attributs `width` et `height` du
     HTML — poses pour eviter le saut de mise en page au chargement — comptent
     comme une hauteur explicite, et `aspect-ratio` ne s'applique que si une
     dimension est `auto`. Sans cette ligne, la vignette faisait 105 px de
     large pour **1000 px de haut** sur telephone : trois colonnes de photos
     hautes comme une page. Mesure, pas vu — la capture le montrait, et je l'ai
     d'abord mise sur le compte du navigateur sans tete. */
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  border-radius: 2px 2px 0 0;
  background: var(--papier-creux);
}
/* Decalage : trois vignettes parfaitement alignees font catalogue ; decalees,
   elles font etal. */
.triptyque img:nth-child(2) { margin-top: 1.6rem; }
.triptyque img:nth-child(3) { margin-top: .7rem; }

@media (min-width: 56rem) {
  .ouverture-dedans {
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 3.5rem;
  }
  .triptyque { margin: 0; padding: 0; gap: .7rem; }
  .ouverture-texte { padding-bottom: 3.5rem; }

  /* Une hauteur bornee plutot qu'un rapport fixe. En 3/4 sur une colonne
     large, les vignettes montaient a mille pixels : le titre se retrouvait au
     milieu de l'ecran avec un vide au-dessus, et la page s'ouvrait sur rien. */
  .triptyque img {
    aspect-ratio: auto;
    height: clamp(17rem, 30vw, 25rem);
  }
  .triptyque img:nth-child(2) { margin-top: 2.4rem; }
  .triptyque img:nth-child(3) { margin-top: 1.1rem; }
}

.surtitre {
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .76rem;
  font-weight: 700;
  color: var(--ble);
  margin-bottom: 1.1rem;
}

h1 {
  font-size: clamp(2.6rem, 11vw, 4.6rem);
  margin-bottom: 1.4rem;
}
h1 em {
  font-style: italic;
  color: var(--ble);
}

.chapo {
  font-size: 1.15rem;
  max-width: 34rem;
  color: var(--ardoise-doux);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  margin: 2rem 0 1.2rem;
}

.dessous {
  font-size: .92rem;
  color: var(--ardoise-doux);
  max-width: 30rem;
}

/* --------------------------------------------------------- sections */

.section { padding: 3.5rem 0; }

/* L'en-tete est collante : sans cette marge, un lien d'ancre depose le titre
   de la section DERRIERE elle, et le lecteur arrive au milieu d'un paragraphe
   sans savoir de quoi il parle. Mesure sur l'en-tete reelle, pas devinee :
   60 px de haut, plus un peu d'air. */
:target,
section[id] { scroll-margin-top: 76px; }
/* Et sur le titre lui-meme : la marge posee sur la section ne suffit pas,
   parce que la section commence bien au-dessus de son titre. Mesure : sans
   cela le titre arrive derriere l'en-tete, et le lecteur atterrit au milieu
   d'un paragraphe sans savoir de quoi il parle. */
section[id] > .dedans > h2 { scroll-margin-top: 76px; }

.section h2 {
  font-size: clamp(1.9rem, 6.5vw, 2.9rem);
  margin-bottom: 1rem;
}

.intro {
  max-width: 36rem;
  color: var(--ardoise-doux);
  margin-bottom: 2.2rem;
}

.note {
  margin-top: 2rem;
  font-size: .95rem;
  color: var(--ardoise-doux);
  max-width: 34rem;
}

/* --------------------------------------------------------- exemples */

.exemples {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--trait);
  border: 1px solid var(--trait);
  border-radius: 3px;
  overflow: hidden;
}

.exemples a {
  display: grid;
  /* La description d'un metier tient parfois sur deux lignes et parfois sur
     une. Sans `height: 100%` et sans ligne souple, le lien ne remplit pas sa
     cellule : le fond gris de la grille apparaissait sous deux cartes sur
     trois, comme un defaut d'alignement. */
  grid-template-rows: auto 1fr;
  height: 100%;
  background: var(--papier);
  text-decoration: none;
  min-height: 44px;
  transition: background .15s ease;
}

/* La capture d'abord : c'est la preuve, et elle se regarde avant de se lire.
   Un rapport fixe et `object-fit: cover` cadrent le haut de la page — le nom
   de la boutique, le bandeau, les premiers rayons — quelle que soit la
   hauteur reelle du fichier. */
.vue {
  display: block;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--papier-creux);
  border-bottom: 1px solid var(--trait);
}
.vue img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}

.dit {
  display: grid;
  gap: .3rem;
  padding: 1.2rem 1.3rem 1.4rem;
}
.exemples a:hover { background: var(--ble-clair); }

.metier {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.1;
}
/* L'enseigne n'est pas un second titre : en serif sous un serif, les deux
   se lisent comme un begaiement. Elle est posee en Karla, petite et en ble —
   elle se lit alors comme le nom d'un commerce, pas comme une redite du
   metier au-dessus. */
.enseigne {
  display: block;
  margin-top: .1rem;
  font-size: .93rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--ble);
}
.detail {
  color: var(--ardoise-doux);
  font-size: .95rem;
}
.lien {
  font-size: .85rem;
  color: var(--ble);
  font-weight: 600;
  letter-spacing: .01em;
  margin-top: .25rem;
}
.lien::after { content: " →"; }

@media (min-width: 46rem) {
  .exemples { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------ ce que ça fait */

.section-sombre {
  background: var(--profond);
  color: var(--papier);
}
.section-sombre .intro,
.section-sombre p { color: #C4D2DB; }
.section-sombre h3 { color: var(--papier); }

.grille {
  display: grid;
  gap: 2rem;
  margin-top: 2.2rem;
}
.grille h3 {
  font-size: 1.35rem;
  margin-bottom: .5rem;
}
.grille p { font-size: .98rem; }

@media (min-width: 46rem) {
  .grille {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 3rem;
  }
}
@media (min-width: 64rem) {
  .grille { grid-template-columns: repeat(3, 1fr); }
}

/* ------------------------------------------------------------ bande */

/* Une respiration entre deux blocs de texte. Purement decorative — d'ou
   `aria-hidden` sur l'element : un lecteur d'ecran n'a rien a y gagner et
   traverserait une image sans texte alternatif utile. */
.bande {
  height: clamp(9rem, 26vw, 16rem);
  overflow: hidden;
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
  background: var(--papier-creux);
}
.bande img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 62%;
  display: block;
}

/* ------------------------------------------------------- à la demande */

/* Un fond creux plutot qu'une section sombre de plus : la page en a deja
   une, et deux blocs sombres separes par une bande de photo donnaient un
   effet de zebre. Celui-ci doit se lire comme une annexe de « Ce que ca
   fait » — proche, mais pas au meme rang. */
.section-demande { background: var(--papier-creux); }

.section-demande .intro strong {
  /* La seule phrase de la page qu'un artisan doit lire meme en diagonale :
     rien de ce qui suit n'existe encore. Soulignee plutot que grasse seule,
     parce qu'en gras elle se confond avec les intitules de la liste juste
     dessous. */
  box-shadow: inset 0 -.42em var(--ble-clair);
}

.demande {
  display: grid;
  gap: 1.9rem;
  margin-top: 2.2rem;
}

.lot h3 {
  margin: 0 0 .7rem;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 400;
  line-height: 1.2;
}

.lot ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .62rem;
}

.lot li {
  position: relative;
  padding-left: 1.15rem;
  font-size: .97rem;
  line-height: 1.5;
  color: var(--ardoise-doux);
}

/* Un tiret plutot qu'une puce ronde, et surtout pas un numero : la liste
   n'est pas une sequence, et un « 01 / 02 / 03 » decoratif ferait croire a un
   ordre de deploiement qui n'existe pas. */
.lot li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ble);
}

.lot li strong {
  color: var(--ardoise);
  font-weight: 600;
}

@media (min-width: 46rem) {
  .demande {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.1rem 2.8rem;
  }
}

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

/* ----------------------------------------------------------- étapes */

/* Numérotées parce que l'ordre est réel : on ne monte pas un site avant
   d'avoir parlé, et on ne le confie pas avant de l'avoir monté. */
.etapes {
  list-style: none;
  counter-reset: etape;
  margin: 2.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.etapes li {
  counter-increment: etape;
  padding-left: 3.2rem;
  position: relative;
}
.etapes li::before {
  content: counter(etape);
  position: absolute;
  left: 0;
  top: -.1rem;
  width: 2.2rem;
  height: 2.2rem;
  display: grid;
  place-items: center;
  border: 2px solid var(--ble);
  border-radius: 50%;
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 1.15rem;
  color: var(--ble);
}
.etapes h3 {
  font-size: 1.4rem;
  margin-bottom: .4rem;
}
.etapes p {
  color: var(--ardoise-doux);
  max-width: 34rem;
}

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

/* ------------------------------------------------------------- qui */

.qui {
  display: grid;
  gap: 1.1rem;
  max-width: 36rem;
  border-left: 3px solid var(--ble);
  padding-left: 1.4rem;
}
.qui p { font-size: 1.05rem; }

/* ----------------------------------------------------------- appel */

.section-appel {
  background: var(--papier-creux);
  border-top: 1px solid var(--trait);
  border-bottom: 1px solid var(--trait);
}

.courriel {
  margin: 1.5rem 0 0;
}
.courriel a {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  color: var(--ble);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  word-break: break-word;
}
.courriel a:hover { border-bottom-color: var(--ble); }

.fiche-entree { margin-top: 1.25rem; }

/* ------------------------------------------------------------- pied */

.pied {
  padding: 2.5rem 0 3.5rem;
  font-size: .92rem;
  color: var(--ardoise-doux);
}
.pied p + p { margin-top: .6rem; }
.pied strong { color: var(--ardoise); }
/* Un lien seul dans le pied est une cible, pas du texte : 44 px, comme partout. */
.pied .lien-pied { display: inline-flex; align-items: center; min-height: 44px; }
.petit {
  max-width: 38rem;
  font-size: .88rem;
}