@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-Thin.ttf') format('truetype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Sora'; src:url('../fonts/Sora/Sora-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }

:root{
  --regular: 'Sora', sans-serif;
  --light: 'Sora', sans-serif;
  --bold: 'Sora', sans-serif;
}

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

html{
  box-sizing: border-box;
  scroll-behavior: smooth;
  min-height: 100%;
  /* couleur de fin du dégradé : c'est elle qui apparaît lors du rebond
     élastique en bas de page sur mobile, elle doit s'y fondre */
  background: #FFFFFF;
}

body{
  /* Le dégradé est peint par ::before ci-dessous, pas par background-attachment:
     fixed — que les navigateurs mobiles repeignent mal quand la barre d'adresse
     apparaît, laissant une bande de couleur nette sous le pied de page. */
  color: #1a1a1a;
  font-family: 'Sora', system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  font-size: 1.875rem;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  display: grid;
  /* minmax(0,…) so an over-wide child cannot stretch the page past the viewport */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: -webkit-fill-available;
  min-height: 100vh;
  /* dvh suit la hauteur réelle quand la barre d'adresse s'affiche ou se masque */
  min-height: 100dvh;
}

/* Calque de fond : couvre toujours le viewport visible, sans les artefacts de
   repaint de background-attachment: fixed. */
body::before{
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  /* valeur par defaut ; le back office la remplace via --page-gradient */
  background: var(--page-gradient, linear-gradient(180deg, #FF4905 0%, #FFFFFF 100%));
  pointer-events: none;
}

img{ display:block; height:auto; max-width:100%; }
figure{ margin:0; }
a{ text-decoration:none; }
a, a:active, a:visited{ color:#1a1a1a; }
a:hover{ text-decoration: underline; }
.center{ text-align:center; }

.h1, h1{
  font-size: 1.875rem;
  font-family: var(--regular);
  font-weight: 400;
  line-height: 1.2;
  margin: 0;
  padding: 0;
  text-align: center;
}
h2{
  font-family: var(--light);
  font-weight: 300;
  font-size: 1.875rem;
  line-height: 1;
  margin: 1rem 0 .5rem;
  padding: 0 1rem;
  text-align: center;
}
h3{ font-family: var(--regular); font-weight: 400; }
h3, h4{ font-size: 1.125rem; line-height: 1.4; margin: 1rem 0; padding: 0; text-align: center; }
h4{ font-family: var(--light); font-weight: 300; text-transform: uppercase; }

p{ font-size: 1.125rem; line-height: 1.2; margin: 0; padding: 0; }

address{ margin: 0 0 1.5rem; font-style: normal; }
b, strong{ font-family: var(--bold); font-weight: 700; }
small{ font-size: .6875rem; line-height: 1.2; }
em{ font-style: italic; font-weight: 300; }

.home, .intro{ text-align: center; }
.home{ place-content: center; display:grid; }
.home-img{ margin-bottom: 1.5rem; display: inline-block; }

.siteMain{ padding: 0; }
.mainPage{ place-content: center; padding: 1.5rem; }

/* Coffee Lineup */
.mainLineup{
  padding: 1.5rem 1rem 4rem;
  width: 100%;
  max-width: 64rem;
  margin: 0 auto;
}

.lineup-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
@media (min-width: 500px){
  .lineup-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 800px){
  .lineup-grid{ grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
}

.lineup-item{ margin: 0; position: relative; }
.lineup-item img{
  width: 100%;
  /* format 480x800 : la largeur reste fluide, le ratio donne exactement
     480x800 quand la colonne fait 480 px */
  aspect-ratio: 480 / 800;
  object-fit: cover;
  border-radius: .25rem;
  display: block;
}
.lineup-item__link{
  display: block;
  border-radius: .25rem;
  transition: opacity .2s ease;
}
.lineup-item__link:hover,
.lineup-item__link:focus-visible{
  opacity: .85;
}
.lineup-item__badge{
  position: absolute;
  top: .6rem;
  left: .6rem;
  z-index: 1;
  background: rgba(26,26,26,.6);
  color: #fff;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1;
  padding: .4rem .65rem;
  border-radius: 999px;
  pointer-events: none;
}

/* Work */
.mainWork{
  padding: 1.5rem 1rem 4rem;
  /* width:100% — sans ça, les marges auto empêchent l'étirement en grille et
     le bloc se réduit à la largeur du titre (l'iframe en % ne compte pas). */
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
}

.work-form-wrap{
  margin-top: 1.5rem;
}
.work-form-wrap iframe{
  width: 100%;
  /* plancher discret le temps du chargement : au-delà c'est le script Tally
     qui fixe la hauteur exacte du formulaire (ne pas remonter cette valeur,
     elle empêcherait l'iframe de se réduire au contenu réel). */
  min-height: 300px;
  border: 0;
  display: block;
}

/* Header */
.siteHeader{
  margin: 0;
  padding: .5rem 1rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
@media (min-width: 800px){ .siteHeader{ padding: 1rem; } }
.siteHeader .globalNav{ justify-self: start; min-width: 0; }
.siteHeader .brandLogo{ height: 1.25rem; max-width: 100%; }
@media (min-width: 800px){ .siteHeader .brandLogo{ height: 1.875rem; } }
.siteHeader .brandLogo__link{ display: inline-block; padding: 0; text-align: center; min-width: 0; }
.siteHeader .actions{ justify-self: end; min-width: 0; display: flex; align-items: center; gap: .75rem; }

.globalNav__link{
  font-size: 1.125rem;
  color: #1a1a1a;
  line-height: 1;
  text-decoration: none;
  display: block;
  padding: .25rem;
  transition: color .25s ease, background-color .25s ease;
  margin: 0;
  border-radius: .25rem;
}
.globalNav__link:hover{ text-decoration: none; color: #1a1a1a; background-color: #fff; }
.globalNav__link:focus{ outline: 1px dotted #1a1a1a; }

/* Footer */
.siteFooter{
  margin: 0;
  padding: 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 1rem;
  /* one size for the whole footer — copyright, centre text and links */
  font-size: .875rem;
}
.siteFooter .colophon{ justify-self: start; }
.siteFooter__center{
  text-align: center;
  justify-self: center;
}
.siteFooter__links{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .5rem 1.5rem;
  justify-self: end;
}
.contact-link{ position: relative; display: inline-block; }

/* Carta / menu page */
.layout{ padding: 1.5rem 0 3rem; }
.cartItem{ padding: 0 .125rem; }
.cartItem table{
  padding: 0;
  margin: 0 auto;
  max-width: 48rem;
  width: 100%;
  font-size: 1.125rem;
  line-height: 1.4;
  border-collapse: collapse;
  /* fixed : les largeurs viennent du CSS et non du contenu, sinon chaque
     section (tableau distinct) calcule ses colonnes différemment */
  table-layout: fixed;
}
/* Colonne des libellés à largeur constante : la 1re colonne de prix démarre
   donc exactement au même endroit dans toutes les sections de la carte. */
.cartItem table th:first-child,
.cartItem table td:first-child{ width: 62%; }
.cartItem table thead th{ font-size: .875rem; padding: .5rem; text-align: left; font-weight:400; white-space: nowrap; }
/* Les colonnes de prix gardent leur valeur sur une seule ligne */
.cartItem table tr td:not(:first-child){ white-space: nowrap; }
.cartItem table thead th:last-child{ padding-right: 1rem; }
.cartItem table tr{ vertical-align: baseline; }
.cartItem table tr:hover{ background-color: hsla(0,0%,100%,.05); border-radius: 1rem; }
.cartItem table tr td{ padding: .35rem .5rem; }
.cartItem table tr td:first-child{ padding-left: 1rem; display: flex; flex-flow: column wrap; }
.cartItem table tr td:last-child{ padding-right: 1rem; }
.cartItem table tr em{ font-style: normal; font-size: .875rem; }

.cart blockquote{
  margin: 3rem auto;
  max-width: 31.25rem;
  padding: .5rem 1rem;
  border-radius: .1875rem;
  text-align: center;
}
.cart blockquote p{ font-size: .875rem; font-weight: 400; line-height: 1.4; text-align: center; }

/* Même traitement que l'encart ci-dessus : centré, même taille */
.disclaimer{
  margin: 3rem auto;
  max-width: 31.25rem;
  padding: 1rem;
  border-radius: .1875rem;
  text-align: center;
}
.disclaimer p{ font-size: .875rem; font-weight: 400; line-height: 1.4; text-align: center; }

.carta-footnote{
  margin: 2rem auto 0;
  max-width: 31.25rem;
  padding: 0 1rem;
  font-size: .8125rem;
  line-height: 1.4;
  text-align: center;
  opacity: .75;
}

/* ---- Petits écrans ---- */
@media (max-width: 599px){
  body{ font-size: 1.375rem; }

  .h1, h1, h2{ font-size: 1.375rem; }

  .globalNav__link{ font-size: .875rem; white-space: nowrap; }

  .siteFooter{
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
    gap: .75rem;
    padding: 1.5rem 1rem;
  }
  .siteFooter .colophon,
  .siteFooter__center,
  .siteFooter__links{ justify-self: center; }
  .siteFooter__links{ justify-content: center; }

  .cartItem table{ font-size: 1rem; }
  .cartItem table tr td{ padding: .35rem .25rem; }
  .cartItem table tr td:first-child{ padding-left: .5rem; }
  .cartItem table tr td:last-child{ padding-right: .5rem; }
  .cartItem table thead th{ padding: .5rem .25rem; }
  .cartItem table thead th:last-child{ padding-right: .5rem; }
}

/* Très petits écrans : on réduit encore le logo et la nav pour tenir sur une ligne */
@media (max-width: 380px){
  .siteHeader{ padding: .5rem .75rem; }
  .siteHeader .brandLogo{ height: 1rem; }
  .globalNav__link{ font-size: .8125rem; padding: .25rem .125rem; }
}

/* Les libellés de la carte doivent pouvoir se couper plutôt que déborder */
.cartItem table tr td:first-child{ min-width: 0; overflow-wrap: break-word; }


/* Photo d'un article : vignette en fin de ligne, à droite */
.cartItem table th.cart-item-photo,
.cartItem table td.cart-item-photo{
  width: 6.5rem;
  padding: .35rem .5rem;
}
.cartItem table td.cart-item-photo img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .25rem;
  display: block;
}
@media (max-width: 599px){
  .cartItem table th.cart-item-photo,
  .cartItem table td.cart-item-photo{
    width: 4.5rem;
    padding: .35rem .25rem;
  }
}

/* Ligne portant une photo : le texte se centre sur la vignette.
   La 1re cellule repasse en table-cell — en display:flex elle ne s'étire pas à
   la hauteur de la ligne, donc le centrage se ferait dans sa propre boîte.
   Le nom et la description s'empilent alors via em{display:block}. */
.cartItem table tr.has-photo td{ vertical-align: middle; }
.cartItem table tr.has-photo td:first-child{
  display: table-cell;
  vertical-align: middle;
}
.cartItem table tr.has-photo td:first-child em{ display: block; }

/* Sous 360 px, la vignette agrandie ne tient pas sans comprimer les libellés
   ou tronquer les prix : on y garde le petit format. */
@media (max-width: 360px){
  .cartItem table th.cart-item-photo,
  .cartItem table td.cart-item-photo{ width: 3.25rem; }
}

/* ---- Carte en fiches : 3 colonnes par catégorie ---- */
.cart-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.5rem;
  max-width: 60rem;
  margin: 1.5rem auto 0;
  padding: 0 1rem;
}
@media (max-width: 700px){
  .cart-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 1rem; }
}
@media (max-width: 460px){
  .cart-grid{ grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

.cart-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.cart-card__photo{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: .25rem;
  display: block;
  margin-bottom: .85rem;
}

/* Les tailles ci-dessous ne s'appliquent qu'en l'absence de balise de titre
   attribuée (sélecteur balise+classe) : sinon la balise choisie n'aurait
   aucun effet visible, la classe l'emportant sur h1..h4. */
.cart-card__name{
  line-height: 1.3;
  overflow-wrap: break-word;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
div.cart-card__name{ font-size: 1.125rem; }

.cart-card__desc{
  line-height: 1.45;
  margin: .35rem 0 0;
  padding: 0;
  overflow-wrap: break-word;
  max-width: 100%;
}
p.cart-card__desc{ font-size: .875rem; }

.cart-card__price{
  line-height: 1.3;
  margin: .5rem 0 0;
  padding: 0;
}
p.cart-card__price{ font-size: 1.125rem; }

/* Balise de titre attribuée à un champ d'une ligne de tableau : elle doit
   rester en ligne pour ne pas casser la cellule (nom + description). */
.cartItem table td h1,
.cartItem table td h2,
.cartItem table td h3,
.cartItem table td h4{
  display: inline;
  margin: 0;
  padding: 0;
  line-height: inherit;
  text-align: inherit;
}

/* Titre/sous-titre de catégorie rendus sans balise de titre : on reprend
   l'allure des h3/h4 d'origine. */
div.carta-section-title,
div.carta-section-subtitle{
  font-size: 1.125rem;
  line-height: 1.4;
  margin: 1rem 0;
  text-align: center;
}
div.carta-section-subtitle{ text-transform: uppercase; }

/* ---- Badge WhatsApp du pied de page (anneau de texte tournant) ---- */
#wa-float{
  position: relative;
  width: 90px;
  height: 90px;
  display: grid;
  place-items: center;
  margin: .75rem auto 0;
}

.wa-ring{
  position: absolute;
  inset: 0;
  width: 90px;
  height: 90px;
  animation: wa-spin 12s linear infinite;
  pointer-events: none;
}
.wa-ring text{
  font-size: 7.2px;
  letter-spacing: 3.8px;
  font-weight: 700;
  text-transform: uppercase;
  fill: #25D366;
}

#wa-float a{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .2s ease;
}
/* le survol global souligne les liens : sans effet voulu sur une pastille */
#wa-float a:hover,
#wa-float a:focus-visible{
  text-decoration: none;
  transform: scale(1.06);
}

.wa-icon{
  width: 26px;
  height: 26px;
  fill: #fff;
  display: block;
}

@keyframes wa-spin{ to{ transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce){
  .wa-ring{ animation: none; }
  #wa-float a{ transition: none; }
}

/* ---- Sélecteur de langue (drapeaux) ---- */
.lang-switcher{
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}

.lang-switcher__btn{
  background: none;
  border: 1px solid transparent;
  border-radius: .35rem;
  cursor: pointer;
  line-height: 1;
  padding: .2rem .3rem;
  /* les emojis drapeau sont rendus par la police système : on la force pour
     éviter que la police du site les remplace par les lettres du code pays */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.05rem;
  opacity: .55;
  transition: opacity .15s ease, border-color .15s ease;
}
.lang-switcher__btn:hover,
.lang-switcher__btn:focus-visible{ opacity: 1; }
.lang-switcher__btn.is-active{
  opacity: 1;
  border-color: rgba(26,26,26,.35);
}

/* Sous l'image centrale de l'accueil : plus visible, centré */
#lang-switcher-main{
  display: flex;
  justify-content: center;
  margin: .25rem 0 1.25rem;
}
#lang-switcher-main .lang-switcher__btn{ font-size: 1.5rem; padding: .25rem .4rem; }

/* ---- Animation des liens au survol ----
   Trait qui se déploie depuis la gauche, plutôt qu'un soulignement qui
   apparaît d'un bloc. Exclut les liens qui ne sont pas du texte (logo,
   photos du Lineup, pastille WhatsApp) et la nav du header, qui a son
   propre traitement en pastille blanche. */
.siteFooter__links a{
  position: relative;
  text-decoration: none;
}
.siteFooter__links a::after{
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.15em;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1);
}
.siteFooter__links a:hover::after,
.siteFooter__links a:focus-visible::after{
  transform: scaleX(1);
}
/* le soulignement natif ferait doublon avec le trait animé */
.siteFooter__links a:hover{ text-decoration: none; }

@media (prefers-reduced-motion: reduce){
  .siteFooter__links a::after{ transition: none; }
  .globalNav__link{ transition: none; }
}