/* ==========================================================================
   Casette — la vitrine publique (casette.fr, mentions légales, confidentialité).

   D'après l'écran « Vitrine » de la maquette (docs/maquette/Vitrine.dc.html),
   dans la charte du brandbook La Quincaillerie :
     · Épinard et Betterave en couleurs principales, Pistache et Pêche en
       secondaires, Sésame en fond ;
     · jamais les deux teintes les plus foncées l'une sur l'autre (Épinard et
       Betterave), ni les deux plus claires (Sésame et Pêche) pour du texte ;
     · Betterave pour les boutons (texte blanc, 5,4 pour 1) et les grands
       titres, jamais pour du petit texte sur fond clair.

   Polices : Delius (titres) et Quicksand (textes), libres (OFL), hébergées
   ici, en attendant de savoir si la licence de Kioves couvre le web.

   Aucune couleur n'est écrite hors de :root.
   ========================================================================== */

@font-face {
  font-family: 'Delius';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/delius-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/quicksand-latin.woff2') format('woff2');
}

:root {
  --epinard: #3D490B;
  --epinard-doux: #5E6B26;
  --betterave: #AF4A47;
  --pistache: #C2D18A;
  --peche: #F2C2AB;
  --sesame: #FFDEBF;
  --blanc: #FFFFFF;

  --titre: 'Delius', ui-rounded, system-ui, sans-serif;
  --texte: 'Quicksand', ui-rounded, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gouttiere: 16px;
  --largeur: 1180px;
}

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

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

body {
  margin: 0;
  background: var(--sesame);
  color: var(--epinard);
  font-family: var(--texte);
  font-size: 17px;
  line-height: 1.5;
}

img, svg { max-width: 100%; }

a { color: var(--epinard); text-underline-offset: 3px; }
a:hover { color: var(--betterave); }
a:focus-visible, .bouton:focus-visible { outline: 3px solid var(--epinard); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1.12; margin: 0; }

.lecteur-seul {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.aller-au-contenu {
  position: absolute; left: var(--gouttiere); top: -60px; z-index: 10;
  background: var(--epinard); color: var(--sesame); padding: 10px 16px; border-radius: 999px; font-weight: 700;
}
.aller-au-contenu:focus { top: 10px; color: var(--sesame); }

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


/* --------------------------------------------------------------------------
   L'EN-TÊTE
   -------------------------------------------------------------------------- */
.entete-vitrine { padding: 18px 0; }
.entete-vitrine .cadre { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; }
.entete-vitrine .logo { display: block; width: 145px; height: auto; }
.nav-vitrine { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 26px; font-weight: 600; font-size: 16px; }
.nav-vitrine a { text-decoration: none; padding: 6px 0; }
.nav-vitrine .discret { font-size: 14px; color: var(--epinard-doux); }
/* La page en cours (/pro) : soulignée, comme la maquette, en Épinard (la Betterave est trop claire pour un petit texte). */
.nav-vitrine a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }


/* --------------------------------------------------------------------------
   LES BOUTONS
   -------------------------------------------------------------------------- */
.bouton {
  display: inline-block; text-decoration: none; font-weight: 700; font-size: 17px;
  border-radius: 999px; padding: 14px 24px; border: 2px solid transparent; line-height: 1.2;
}
.bouton-betterave { background: var(--betterave); color: var(--blanc); }
.bouton-betterave:hover { color: var(--blanc); filter: brightness(0.94); }
.bouton-contour { border-color: var(--sesame); color: var(--sesame); }
.bouton-contour:hover { background: var(--sesame); color: var(--epinard); }
.bouton-sesame { background: var(--sesame); color: var(--epinard); }
.bouton-sesame:hover { color: var(--epinard); filter: brightness(0.96); }
.bouton-epinard { background: var(--epinard); color: var(--sesame); }
.bouton-epinard:hover { color: var(--sesame); filter: brightness(1.15); }


/* --------------------------------------------------------------------------
   L'ACCROCHE : un panneau Épinard, un grand rond Pistache, la porte et les
   stickers en décor (cachés aux lecteurs d'écran).
   -------------------------------------------------------------------------- */
.accroche { padding: 0 var(--gouttiere); }
.accroche-panneau {
  position: relative; overflow: hidden; max-width: calc(var(--largeur) + 48px); margin: 0 auto;
  background: var(--epinard); color: var(--sesame); border-radius: 36px;
  padding: 44px 24px 0; display: grid; gap: 12px;
}
.accroche-texte { position: relative; z-index: 1; max-width: 560px; display: flex; flex-direction: column; gap: 20px; }
.accroche h1 { font-size: clamp(38px, 5.4vw, 60px); color: var(--sesame); }
.accroche p { margin: 0; font-size: clamp(18px, 2vw, 20px); line-height: 1.45; }
.accroche .actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Le décor a sa propre place : jamais de texte Sésame sur le rond Pistache
   (les deux teintes claires l'une sur l'autre). */
.accroche-decor { position: relative; height: 240px; pointer-events: none; }
.decor { position: absolute; }
.decor-rond { left: 50%; top: 24px; width: 520px; height: 520px; margin-left: -260px; border-radius: 50%; background: var(--pistache); }
.decor-porte { left: 50%; top: 44px; width: 140px; height: 188px; margin-left: -70px; color: var(--epinard); }
.decor-sticker { width: 84px; height: auto; }
.decor-sticker.un { left: 4%; top: 0; }
.decor-sticker.deux { right: 4%; top: 110px; }

@media (min-width: 900px) {
  .accroche-panneau {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 44%); align-items: center; gap: 0;
    padding: 64px 0 64px 64px; min-height: 520px;
  }
  .accroche-decor { height: 520px; margin: -64px 0; }
  .decor-rond { left: 0; top: -60px; width: 760px; height: 760px; margin-left: 0; }
  .decor-porte { left: 26%; top: 100px; width: 240px; height: 322px; margin-left: 0; }
  .decor-sticker { width: 118px; }
  .decor-sticker.un { left: 4%; top: 64px; }
  .decor-sticker.deux { right: 8%; top: 300px; }
}


/* --------------------------------------------------------------------------
   LES SECTIONS
   -------------------------------------------------------------------------- */
.section { padding: 52px 0 0; }
.section h2 { font-size: clamp(30px, 4vw, 38px); margin-bottom: 22px; }

.casiers { display: grid; gap: 18px; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 760px) { .casiers { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.casier { background: var(--blanc); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; gap: 6px; }
.casier h3 { font-size: 27px; }
.casier .commune { font-weight: 700; color: var(--epinard-doux); }
.casier address { font-style: normal; }
.pastilles { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.pastilles li { border-radius: 999px; padding: 5px 11px; font-size: 14px; font-weight: 700; }
.pastilles .pistache { background: var(--pistache); }
.pastilles .peche { background: var(--peche); }
.casier .itineraire { margin-top: 10px; font-weight: 700; }

.produits { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) { .produits { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.produits li { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.produits img { height: 104px; width: auto; }
.produits span { font-family: var(--titre); font-size: 21px; }

.duo { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.carte-blanche { background: var(--blanc); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 12px; }
.carte-betterave { background: var(--betterave); color: var(--blanc); border-radius: 28px; padding: 30px; display: flex; flex-direction: column; gap: 14px; }
.carte-blanche h2, .carte-betterave h2 { font-size: 30px; margin: 0; }
.carte-betterave h2 { color: var(--blanc); }
.carte-blanche p, .carte-betterave p { margin: 0; line-height: 1.45; }
.carte-blanche address { font-style: normal; font-weight: 700; }
.carte-blanche .doux { color: var(--epinard-doux); }
.carte-betterave .bouton { align-self: flex-start; margin-top: 6px; }


/* Le bandeau du sondage (Pêche, texte Épinard ; bouton Épinard, texte Sésame). */
.bandeau-avis {
  background: var(--peche); border-radius: 28px; padding: 26px 30px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
}
.bandeau-avis h2 { font-size: 26px; margin: 0 0 4px; }
.bandeau-avis p { margin: 0; font-size: 17px; }
.bandeau-avis .bouton { white-space: nowrap; }


/* --------------------------------------------------------------------------
   LE PIED DE PAGE (Épinard, texte Sésame : 7,6 pour 1)
   -------------------------------------------------------------------------- */
.pied { margin-top: 56px; background: var(--epinard); color: var(--sesame); padding: 34px 0; }
.pied .cadre { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px 40px; }
.pied a { color: var(--sesame); }
.pied a:hover { color: var(--pistache); }
.pied a:focus-visible { outline-color: var(--sesame); }
.pied .marque { display: flex; align-items: center; gap: 10px; font-family: var(--titre); font-size: 24px; }
.pied .marque svg { width: 22px; height: 30px; color: var(--sesame); }
.pied .identite { font-size: 14px; line-height: 1.6; max-width: 540px; margin: 10px 0 0; }
.pied nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 600; }
/* Des cibles d'au moins 24 px de haut, faciles à toucher au doigt. */
.pied a { display: inline-block; padding: 4px 0; min-height: 24px; }


/* --------------------------------------------------------------------------
   LES PAGES DE TEXTE (mentions légales, confidentialité)
   -------------------------------------------------------------------------- */
.page-texte { max-width: 760px; }
.page-texte h1 { font-size: clamp(34px, 5vw, 44px); margin: 18px 0 22px; }
.page-texte h2 { font-size: 26px; margin: 34px 0 10px; }
.page-texte p, .page-texte li { line-height: 1.6; }
.page-texte .carte-blanche { margin-top: 12px; }
.page-texte .maj { color: var(--epinard-doux); font-size: 15px; }