/* ==========================================================================
   Laynou Thaï Kitchen — design system (migration AppDrag → Bootstrap 5)
   Valeurs relevées sur le rendu de l'export AppDrag à 1440 px de large.
   ========================================================================== */

/* ---------- Polices (locales) ---------- */
@font-face { font-family: "quicksand"; src: url("../fonts/quicksand.woff2") format("woff2"), url("../fonts/quicksand.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fonts/montserrat.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("../fonts/roboto-700-italic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Font Awesome Brands"; src: url("../fonts/fa-brands-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }

/* ---------- Tokens de couleur (palette config.json) ---------- */
:root {
  --color-orange:      #ffa000;  /* Dark Primary Color — boutons, bordures, survol */
  --color-jaune:       #ffc107;  /* Primary Color — titres en couleur            */
  --color-creme:       #ffecb3;  /* Light Primary Color — légendes de galerie     */
  --color-noir:        #212121;  /* Text Color                                    */
  --color-gris:        #727272;  /* Secondary Text Color                          */
  --color-brun:        #865b4e;  /* Divider Color — icônes réseaux sociaux        */
  --color-anthracite:  #424242;  /* texte de base AppDrag, liens du pied de page  */
  --color-gris-clair:  #ececec;  /* crédit du pied de page                        */
  --color-blanc:       #ffffff;
  --color-voile:       rgba(33, 33, 33, .29); /* fond translucide des panneaux */

  --font-title: "quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:  "quicksand", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-nav:   "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-legal: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-base:  "Helvetica Neue", Helvetica, Arial, sans-serif;

  --bs-primary: var(--color-orange);
  --bs-primary-rgb: 255, 160, 0;
  --bs-body-font-family: var(--font-base);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.42857143;
  --bs-body-color: var(--color-anthracite);
  --bs-link-color-rgb: 66, 66, 66;
  --bs-link-hover-color-rgb: 255, 160, 0;
}

/* ---------- Base : reprend le socle 14px / 20px de l'export ----------
   Les blocs de texte gardent ce socle et les tailles portent sur les
   <span> de classe, comme dans l'original : les hauteurs de ligne
   restent ainsi identiques au pixel près. */
html { font-size: 16px; }
body {
  font-family: var(--font-base);
  font-size: 14px;
  line-height: 1.42857143;
  color: var(--color-anthracite);
  background-color: var(--color-blanc);
}
h1, h2, h3, p { font-family: inherit; font-size: 14px; line-height: 1.42857143; font-weight: 400; color: inherit; margin: 0; }
b, strong { font-weight: 700; }
a { text-decoration: none; }

/* ---------- Classes de texte (convention WeWeb) ----------
   Categorie-[Alignement][Graisse]-[TaillePx]-[Couleur] ; tailles en rem. */
[class^="Titre-"], [class*=" Titre-"],
[class^="Body-"], [class*=" Body-"],
[class^="Label-"], [class*=" Label-"] { font-family: var(--font-title); line-height: 1.42857143; }

/* Titre 1 — h1 des bandeaux (60px) */
.Titre-GB-60px-Jaune { font-size: 3.75rem; font-weight: 700; color: var(--color-jaune); }
.Titre-GB-60px-Blanc { font-size: 3.75rem; font-weight: 700; color: var(--color-blanc); }
/* Titre 2 — annonces et titres de bloc (50px) */
.Titre-CB-50px-Blanc { font-size: 3.125rem; font-weight: 700; color: var(--color-blanc); }
.Titre-CB-50px-Jaune { font-size: 3.125rem; font-weight: 700; color: var(--color-jaune); }
.Titre-CR-50px-Jaune { font-size: 3.125rem; font-weight: 400; color: var(--color-jaune); letter-spacing: 3.1px; }
/* Titre 3 — sur-titre (22px) */
.Titre-GB-22px-Blanc { font-size: 1.375rem; font-weight: 700; color: var(--color-blanc); }
/* Titre de section des mentions (26px, Montserrat) */
.Titre-CR-26px-Jaune { font-family: var(--font-legal); font-size: 1.625rem; font-weight: 400; line-height: 1.4; color: var(--color-jaune); }

/* Body (18px) */
.Body-GR-18px-Blanc { font-size: 1.125rem; font-weight: 400; color: var(--color-blanc); }
.Body-GB-18px-Blanc { font-size: 1.125rem; font-weight: 700; color: var(--color-blanc); }
/* Body (16px) */
.Body-GB-16px-Blanc { font-size: 1rem; font-weight: 700; color: var(--color-blanc); }
.Body-GR-16px-Blanc-Legal { font-family: var(--font-legal); font-size: 1rem; font-weight: 400; color: var(--color-blanc); }
.Body-GB-16px-Jaune-Legal { font-family: var(--font-legal); font-size: 1rem; font-weight: 700; color: var(--color-jaune); }
/* Labels */
.Label-CR-16px-Noir  { font-size: 1rem; font-weight: 400; color: var(--color-noir); }
.Label-CB-15px-Noir  { font-size: .9375rem; font-weight: 700; color: var(--color-noir); }
.Label-CB-14px-Anthracite { font-size: .875rem; font-weight: 700; color: var(--color-anthracite); }
.Label-CB-14px-Blanc { font-size: .875rem; font-weight: 700; color: var(--color-blanc); }
.Label-CB-14px-GrisClair { font-size: .875rem; font-weight: 700; font-style: italic; color: var(--color-gris-clair); }

/* Interlettrage relevé sur certains paragraphes */
.ls-005 { letter-spacing: .05em; }
.ls-001 { letter-spacing: .01em; }

/* ---------- Fond de page fixe (image en <img>, compatible Studio) ----------
   .page découpe le fond à la hauteur du contenu (fond blanc au-delà, comme l'original). */
.page { position: relative; clip-path: inset(0); }
.page-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  z-index: -1; pointer-events: none;
}

/* ---------- Grille : conteneur Bootstrap 3 (1170 px) ---------- */
.container-laynou { width: 100%; margin-inline: auto; padding-inline: 15px; }
@media (min-width: 768px)  { .container-laynou { max-width: 750px; } }
@media (min-width: 992px)  { .container-laynou { max-width: 970px; } }
@media (min-width: 1200px) { .container-laynou { max-width: 1170px; } }
.container-laynou > .panel,
.container-laynou > .gallery-wrap,
.container-laynou > .cards { margin-inline: -15px; }

/* ---------- En-tête ---------- */
.site-header { height: 140px; }
.site-header .container-laynou { height: 100%; }
.site-header .row, .site-footer .footer-row { margin-inline: -15px; }
.site-header .brand-col { padding: 10px 0; text-align: center; }
.site-header .brand-logo { width: 119px; height: 120px; object-fit: contain; }
.site-header .nav-col { padding: 32px 0 0 15px; }
.site-header .site-nav .nav-link {
  font-family: var(--font-nav); font-size: .9375rem; font-weight: 400; letter-spacing: .05em;
  line-height: 20px; color: #000; padding: 0 20px;
}
.site-header .site-nav .nav-link:hover,
.site-header .site-nav .nav-link:focus,
.site-header .site-nav .nav-link.active { color: var(--color-orange); }
.site-header .navbar-toggler { border-color: var(--color-orange); background: var(--color-voile); }
.site-header .navbar-toggler-icon { filter: invert(1); }
@media (min-width: 768px) {
  .site-header .brand-col { flex: 0 0 25%; max-width: 25%; }
  .site-header .nav-col { flex: 0 0 75%; max-width: 75%; }
}
@media (max-width: 767.98px) {
  .site-header { height: auto; }
  .site-header .brand-col { padding: 10px 0; }
  .site-header .brand-logo { width: 80px; height: 80px; }
  .site-header .nav-col { padding: 0 0 10px; }
  .site-nav { background: var(--color-voile); border: 1px solid var(--color-orange); border-radius: 10px; padding: 10px 0; }
  .site-header .site-nav .nav-link { color: var(--color-blanc); padding: 8px 20px; font-family: var(--font-body); font-size: 1rem; }
}

/* ---------- Sections et panneaux translucides ---------- */
.section { padding: 50px 0; }
.section-30 { padding: 30px 0; }
.section-100 { padding: 100px 0; }

.panel {
  margin: 10px 0;
  padding: 10px;
  background: var(--color-voile);
  border: 1px solid var(--color-orange);
  border-radius: 10px;
}
.panel-col { display: flex; flex-direction: column; padding: 20px 15px; } /* marges non fusionnées, comme l'original */

.panel-logo { display: block; width: 100%; object-fit: contain; object-position: 50% 50%; }
.panel-logo-150 { height: 150px; margin: 50px 0 20px; }
.panel-logo-200 { height: 200px; margin: 50px 0; }
.panel-logo-200-top { height: 200px; margin: 0 0 30px; }

.title-block { margin: 20px 0; }
.title-block-tight { margin: 0 0 10px; }
.text-block { margin: 20px 0; }
.text-block-pr { padding-right: 244px; }
.text-block-last { margin: 20px 0 0; }

/* Annonce de fermeture (accueil) — lignes de 72,4 px comme l'original */
.announce { margin: 20px 0; text-align: center; }
@media (min-width: 992px) {
  .announce .Titre-CB-50px-Blanc, .announce .Titre-CB-50px-Jaune, .menu-title .Titre-CR-50px-Jaune { line-height: 72.43px; }
}
/* Sur-titre « CUISINE THAÏLANDAISE » : socle de ligne de 77 px de l'original */
.kicker { margin: 0 0 10px; font-size: 77px; line-height: 1.42857143; }

/* ---------- Boutons ---------- */
.btn-wrap { text-align: center; }
.btn-laynou {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px; border: 0; border-radius: 10px;
  background: var(--color-orange); color: var(--color-noir);
  font-family: var(--font-body); font-size: 1rem; font-weight: 400; line-height: 1.42857143;
  transition: filter .15s ease;
}
.btn-laynou:hover, .btn-laynou:focus { color: var(--color-noir); filter: brightness(1.08); }
.btn-wrap-panel { margin: 20px 0; }
.btn-wrap-panel-40 { margin: 20px 0 40px; }

/* ---------- Accueil : bloc « Notre menu » ---------- */
.panel-menu { margin: 0 0 30px; padding: 10px 0; }
.menu-col { display: flex; flex-direction: column; padding: 20px 50px; }
.menu-plate { width: 100%; height: 380px; margin-left: 12px; object-fit: contain; }
.menu-title { margin: 47px 0 20px; padding: 0 15px; text-align: center; }
.menu-text { margin: 0 0 20px; padding: 0 15px; }
.menu-btn { margin: 20px 0; }

/* ---------- Accueil : vignettes de navigation ---------- */
.cards { padding: 10px; }
.cards .card-col { display: flex; flex-direction: column; padding: 10px; }
.card-photo {
  display: block; width: 100%; height: 246px; margin: 10px 0;
  object-fit: cover; object-position: 50% 50%;
  border: 2px solid var(--color-orange); border-radius: 10px;
}
.card-photo.pos-top { object-position: 50% 5%; }
.cards .btn-wrap { margin: 20px 0; }

/* ---------- Galeries (lightbox via scripts.js) ---------- */
.gallery-wrap { margin: 10px 0; padding: 10px; }
.gallery-wrap .gallery { padding: 20px 15px; }
.gallery-item { position: relative; padding: 10px; cursor: zoom-in; }
.gallery-frame { position: relative; overflow: hidden; border-radius: 10px; }
.gallery-img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 50%; }

/* Galerie des plats : vignettes 4:3 environ + légende crème */
.gallery-wrap-plats { margin: 0; padding: 10px 0; }
.gallery-wrap-plats .gallery { padding: 0 20px; }
.gallery-wrap-plats .gallery-item { padding: 9px; }
.gallery-wrap-plats .gallery-frame { opacity: .82; transition: opacity .5s ease-out; }
.gallery-wrap-plats .gallery-item:hover .gallery-frame { opacity: 1; }
.gallery-wrap-plats .gallery-img { aspect-ratio: 265 / 185.14; }
.gallery-caption {
  margin: 0; padding: 7.5px 0 6px; background: var(--color-creme);
  text-align: center; line-height: 22px;
}

.zc-holder { height: 1px; }

/* Lightbox */
.lightbox .modal-content { background: transparent; border: 0; }
.lightbox .modal-body { padding: 0; text-align: center; }
.lightbox-img { max-width: 100%; max-height: 85vh; object-fit: contain; }
.lightbox .btn-lightbox {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 50px; border: 0; background: rgba(0, 0, 0, .4); color: var(--color-blanc); font-size: 1.5rem;
}
.lightbox .btn-prev { left: 0; }
.lightbox .btn-next { right: 0; }
.lightbox .btn-close { position: absolute; top: -40px; right: 0; filter: invert(1); opacity: 1; }

/* ---------- Contact ---------- */
.panel-contact { margin: 30px 0 0; padding: 15px; }
.contact-icons { flex: 0 0 165px; max-width: 165px; display: flex; flex-direction: column; }
.contact-texts { flex: 1 1 auto; padding-left: 30px; display: flex; flex-direction: column; }
.contact-icon { display: block; width: 100%; object-fit: contain; }
.contact-icon-1 { height: 65px; margin: 20px 0; }
.contact-icon-2 { height: 60px; margin: 24px 0 20px; }
.contact-icon-3 { height: 60px; margin: 18px 0 20px; }
.contact-icon-4 { height: 60px; margin: 16px 0 20px; }
.contact-text-1 { margin: 20px 0; }
.contact-text-2 { margin: 16px 0 20px; }
.contact-text-3 { margin: 26px 0 20px; }
.contact-text-4 { margin: 50px 0 20px; }

/* ---------- Mentions légales ---------- */
.legal-block { margin: 20px 0; }
.panel-legal-head { display: flow-root; margin: 0; padding: 0 15px; border-bottom: 0; border-radius: 10px 10px 0 0; }
.panel-legal-head h2 { margin: 20px 0; text-align: center; }
.panel-legal-body { margin: 0; padding: 20px 0; border-top: 0; border-radius: 0 0 10px 10px; }
.panel-legal-body .legal-col { padding: 0 15px; }
.panel-legal-body p { margin: 20px 0; }
.panel-legal-body strong { font-weight: 700; color: var(--color-jaune); }
/* Lignes de 23,86 px : socle Helvetica 16px de l'original */
.legal-block .Body-GB-16px-Jaune-Legal, .legal-block .Body-GR-16px-Blanc-Legal,
.panel-legal-body .Body-GR-16px-Blanc-Legal, .panel-legal-body .Body-GB-16px-Jaune-Legal { line-height: 23.86px; }
.legal-link { color: var(--color-blanc); word-break: break-all; }

/* ---------- Pied de page ---------- */
.site-footer { padding: 30px 0; }
.site-footer .footer-row { display: flex; flex-wrap: wrap; align-items: flex-start; }
.footer-social { flex: 0 0 8.33333%; display: flex; padding-left: 9px; height: 40px; align-items: flex-start; }
.footer-social a { display: block; padding-top: 6px; color: var(--color-brun); font-size: 28px; line-height: 28px; }
.footer-social a:first-child { width: 37px; }
.footer-social a:last-child  { width: 34px; }
.footer-social a:hover { color: var(--color-orange); }
.footer-link { flex: 0 0 8.33333%; padding: 8px 15px 0; text-align: center; }
.footer-link-wide { flex: 0 0 16.66667%; }
.footer-credit { flex: 1 1 0; padding: 8px 15px; text-align: center; }
.footer-link a, .footer-credit a { line-height: 20px; }
.footer-link a:hover span { color: var(--color-orange); }
.footer-credit .credit { font-family: Roboto, "Helvetica Neue", Arial, sans-serif; font-size: .875rem; font-weight: 700; font-style: italic; color: var(--color-gris-clair); }

/* Icônes Font Awesome Brands (police locale, 2 glyphes) */
.fa-facebook-square::before { content: "\f082"; }
.fa-instagram::before { content: "\f16d"; }

/* ---------- Responsive (tablette / mobile) ---------- */
@media (max-width: 1199.98px) {
  .text-block-pr { padding-right: 0; }
}
@media (max-width: 991.98px) {
  .Titre-GB-60px-Jaune, .Titre-GB-60px-Blanc { font-size: 2.75rem; }
  .Titre-CB-50px-Blanc, .Titre-CB-50px-Jaune, .Titre-CR-50px-Jaune { font-size: 2.25rem; }
  .kicker { font-size: 40px; }
  .menu-plate { margin-left: 0; height: 300px; }
}
@media (max-width: 767.98px) {
  .container-laynou > .panel, .container-laynou > .gallery-wrap, .container-laynou > .cards { margin-inline: 0; }
  .text-block-pr { padding-right: 0; }
  .Titre-GB-60px-Jaune, .Titre-GB-60px-Blanc { font-size: 2.25rem; }
  .Titre-CB-50px-Blanc, .Titre-CB-50px-Jaune, .Titre-CR-50px-Jaune { font-size: 1.75rem; letter-spacing: 1px; }
  .panel-logo-150, .panel-logo-200, .panel-logo-200-top { height: 120px; margin: 20px 0; }
  .menu-col { padding: 20px; }
  .menu-title { margin-top: 10px; }
  .panel-contact .contact-row { flex-direction: column; }
  .contact-icons { display: none; }
  .contact-texts { padding-left: 0; }
  .footer-social, .footer-link, .footer-link-wide, .footer-credit { flex: 1 1 100%; justify-content: center; text-align: center; padding: 6px 0; height: auto; }
}