/* ==========================================================================
   SEA FOOD by CLEM'S — plateforme web
   --------------------------------------------------------------------------
   DEUX MODES, ET LE MEME SITE.

   Toutes les couleurs passent par des variables. Le mode se change en
   posant data-theme sur <html> : rien d'autre ne bouge dans le code.

   Le mode par defaut suit le reglage du telephone. Si le visiteur
   choisit autre chose, son choix est garde.

   LES IMAGES SONT GRANDES, et c'est le point. Une vignette de 64 pixels
   ne donne pas envie d'un bar braise ; une photo en 4/3 si.
   ========================================================================== */

/* ── MODE SOMBRE, par defaut ── */
:root {
  --fond:          #071A20;
  --fond-2:        #0E2C36;
  --fond-3:        #14434F;
  --carte:         #0E2C36;
  --carte-bord:    rgba(240, 162, 39, .16);
  --texte:         #EAF1F3;
  --texte-doux:    rgba(234, 241, 243, .72);
  --texte-faible:  #78868D;
  --entete:        rgba(7, 26, 32, .88);
  --ombre:         0 18px 46px rgba(0, 0, 0, .42);
  --squelette-a:   #0E2C36;
  --squelette-b:   #14434F;

  /* Ces quatre-la ne changent pas : c'est l'identite de la maison. */
  --safran:        #F0A227;
  --safran-clair:  #F7BE5E;
  --corail:        #E2503C;
  --lagon:         #25A186;
  --creme:         #FDF6EA;
  --abysse:        #071A20;

  --rayon:         18px;
  --rayon-petit:   12px;
  --pilule:        999px;
  --largeur:       1180px;

  --t-xs:   .78rem;
  --t-s:    .88rem;
  --t-base: 1rem;
  --t-m:    1.2rem;
  --t-l:    1.55rem;
  --t-xl:   2.1rem;
}

/* ── MODE CLAIR ── */
:root[data-theme="clair"] {
  --fond:          #FDF6EA;
  --fond-2:        #FFFFFF;
  --fond-3:        #F3E9D7;
  --carte:         #FFFFFF;
  --carte-bord:    #EFE3CE;
  --texte:         #16232A;
  --texte-doux:    #4A5A63;
  --texte-faible:  #8A969C;
  --entete:        rgba(253, 246, 234, .9);
  --ombre:         0 14px 38px rgba(22, 35, 42, .1);
  --squelette-a:   #F3E9D7;
  --squelette-b:   #FFFFFF;
}

/* Si le visiteur n'a rien choisi, on suit son telephone. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --fond:          #FDF6EA;
    --fond-2:        #FFFFFF;
    --fond-3:        #F3E9D7;
    --carte:         #FFFFFF;
    --carte-bord:    #EFE3CE;
    --texte:         #16232A;
    --texte-doux:    #4A5A63;
    --texte-faible:  #8A969C;
    --entete:        rgba(253, 246, 234, .9);
    --ombre:         0 14px 38px rgba(22, 35, 42, .1);
    --squelette-a:   #F3E9D7;
    --squelette-b:   #FFFFFF;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: var(--t-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: 92px;
  /* Le changement de mode ne doit pas clignoter. */
  transition: background .25s ease, color .25s ease;
}

h1, h2, h3 {
  font-family: 'Lora', Georgia, serif;
  font-weight: 600; line-height: 1.12; margin: 0;
  letter-spacing: -.015em;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--safran); outline-offset: 3px; border-radius: 4px; }

.enveloppe { max-width: var(--largeur); margin: 0 auto; padding: 0 22px; }
.invisible {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ═══════════════ EN-TETE ═══════════════ */

.entete {
  position: sticky; top: 0; z-index: 60;
  background: var(--entete); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--carte-bord);
}
.entete__contenu { display: flex; align-items: center; gap: 16px; height: 70px; }

.marque { display: flex; align-items: center; gap: 12px; min-width: 0; }
.marque__logo {
  width: 42px; height: 42px; flex: none; border-radius: 12px;
  overflow: hidden; background: rgba(240, 162, 39, .1);
  border: 1px solid var(--carte-bord);
  display: grid; place-items: center;
}
.marque__logo img { width: 100%; height: 100%; object-fit: contain; }
.marque__nom {
  font-family: 'Lora', serif; font-size: var(--t-base); font-weight: 600;
  line-height: 1.15; white-space: nowrap;
}
.marque__slogan { font-size: var(--t-xs); color: var(--safran); }

.navigation { display: flex; gap: 26px; margin-left: auto; }
.navigation a { font-size: var(--t-s); color: var(--texte-doux); transition: color .18s; }
.navigation a:hover { color: var(--safran); }
@media (max-width: 960px) { .navigation { display: none; } }

/* LE BOUTON DE MODE. Une pastille discrete : on le cherche quand on en
   a besoin, il ne s'impose pas le reste du temps. */
.bascule-mode {
  width: 40px; height: 40px; flex: none; border-radius: 50%;
  border: 1px solid var(--carte-bord); background: transparent;
  color: var(--texte); cursor: pointer;
  display: grid; place-items: center; font-size: 17px;
  transition: border-color .18s, transform .18s;
}
.bascule-mode:hover { border-color: var(--safran); transform: rotate(-12deg); }

/* ═══════════════ BOUTONS ═══════════════ */

.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border: none; border-radius: var(--rayon-petit);
  font-family: inherit; font-size: var(--t-s); font-weight: 600;
  cursor: pointer; text-align: center;
  transition: transform .14s ease, box-shadow .2s ease, background .18s;
}
.bouton--safran {
  background: var(--safran); color: var(--abysse);
  box-shadow: 0 6px 20px rgba(240, 162, 39, .24);
}
.bouton--safran:hover { background: var(--safran-clair); transform: translateY(-1px); }
.bouton--vert { background: var(--lagon); color: #fff; }
.bouton--vert:hover { background: #2CB897; transform: translateY(-1px); }
.bouton--fantome {
  background: transparent; color: var(--texte);
  border: 1px solid var(--carte-bord);
}
.bouton--fantome:hover { border-color: var(--safran); color: var(--safran); }
.bouton--compact { padding: 9px 16px; font-size: var(--t-xs); }

/* ═══════════════ ACCUEIL ═══════════════ */

.accueil { position: relative; padding: 76px 0 60px; overflow: hidden; }
.accueil::before {
  content: ''; position: absolute; inset: -45% -20% auto 50%;
  width: 1150px; height: 1150px; transform: translateX(-50%);
  background: radial-gradient(circle,
              rgba(240,162,39,.15) 0%, rgba(43,122,140,.08) 36%, transparent 66%);
  pointer-events: none;
}
:root[data-theme="clair"] .accueil::before {
  background: radial-gradient(circle,
              rgba(240,162,39,.2) 0%, rgba(226,80,60,.06) 38%, transparent 68%);
}

.accueil__contenu { position: relative; max-width: 800px; }
.accueil__sceau {
  width: 82px; height: 82px; margin-bottom: 26px; border-radius: 22px;
  overflow: hidden; background: rgba(240,162,39,.1);
  border: 1px solid var(--carte-bord); display: grid; place-items: center;
}
.accueil__sceau img { width: 100%; height: 100%; object-fit: contain; }
.accueil h1 { font-size: clamp(2.3rem, 7vw, 4.4rem); margin-bottom: 20px; }
.accueil h1 em { font-style: normal; color: var(--safran); display: block; }
.accueil__phrase {
  font-size: clamp(1rem, 2.1vw, var(--t-m)); color: var(--texte-doux);
  max-width: 54ch; margin: 0 0 32px;
}
.accueil__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.accueil__reperes {
  display: flex; flex-wrap: wrap; gap: 32px;
  margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--carte-bord);
}
.repere__valeur {
  font-family: 'Lora', serif; font-size: var(--t-l);
  font-weight: 600; color: var(--safran); line-height: 1.1;
}
.repere__quoi { font-size: var(--t-xs); color: var(--texte-faible); margin-top: 2px; }

/* ═══════════════ ANNONCES ═══════════════ */

.annonces__piste {
  display: flex; gap: 16px; overflow-x: auto;
  padding: 4px 22px 18px; scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.annonce {
  position: relative; flex: none; width: min(420px, 86vw); aspect-ratio: 16/7;
  border-radius: var(--rayon); overflow: hidden; scroll-snap-align: start;
  background: var(--fond-2); border: 1px solid var(--carte-bord);
}
.annonce img { width: 100%; height: 100%; object-fit: cover; }
.annonce__voile {
  position: absolute; inset: auto 0 0 0; padding: 16px;
  background: linear-gradient(transparent, rgba(7,26,32,.94));
}
.annonce__titre { font-family: 'Lora', serif; font-size: var(--t-base); color: var(--creme); }
.annonce__sous { font-size: var(--t-xs); color: rgba(234,241,243,.78); margin-top: 2px; }
.annonce__genre {
  position: absolute; top: 13px; left: 13px; padding: 4px 11px;
  border-radius: var(--pilule); font-size: 10.5px; font-weight: 700;
  background: var(--safran); color: var(--abysse);
}

/* ═══════════════ SECTIONS ═══════════════ */

.section { padding: 72px 0; position: relative; }
.section--douce { background: var(--fond-2); }

/* LE FILIGRANE. Une seule occurrence, tres pale. */
.section--douce::after {
  content: ''; position: absolute; right: -70px; bottom: -70px;
  width: 340px; height: 340px;
  background: var(--filigrane, none) no-repeat center / contain;
  opacity: .035; pointer-events: none;
}

.section__titre { font-size: clamp(1.6rem, 4vw, var(--t-xl)); }
.section__phrase {
  margin: 12px 0 34px; max-width: 58ch;
  font-size: var(--t-s); color: var(--texte-doux);
}

/* ═══════════════ LA CARTE — DE GRANDES IMAGES ═══════════════ */

.chaines { display: flex; gap: 9px; flex-wrap: wrap; margin-bottom: 30px; }
.chaine {
  padding: 9px 18px; border-radius: var(--pilule);
  border: 1px solid var(--carte-bord); background: var(--carte);
  font-family: inherit; font-size: var(--t-s); font-weight: 500;
  color: var(--texte); cursor: pointer;
  transition: background .16s, color .16s, border-color .16s;
}
.chaine:hover { border-color: var(--safran); }
.chaine[aria-pressed="true"] {
  background: var(--safran); color: var(--abysse); border-color: var(--safran);
}

.plats {
  display: grid; gap: 24px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.plat {
  background: var(--carte); border: 1px solid var(--carte-bord);
  border-radius: var(--rayon); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform .18s ease, box-shadow .22s ease;
}
.plat:hover { transform: translateY(-3px); box-shadow: var(--ombre); }

/* LA PHOTO. Grande, en 4/3 — c'est elle qui decide le client. */
.plat__photo {
  position: relative; aspect-ratio: 4/3; overflow: hidden;
  background: var(--fond-3); display: grid; place-items: center;
  font-size: 44px;
}
.plat__photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.plat:hover .plat__photo img { transform: scale(1.04); }

.plat__marque {
  position: absolute; top: 12px; left: 12px; padding: 5px 12px;
  border-radius: var(--pilule); font-size: 11px; font-weight: 700;
  background: var(--corail); color: #fff;
}
.plat__note {
  position: absolute; top: 12px; right: 12px; padding: 5px 11px;
  border-radius: var(--pilule); font-size: 11.5px; font-weight: 600;
  background: rgba(7,26,32,.82); color: var(--creme);
  display: flex; align-items: center; gap: 4px;
}

.plat__corps { padding: 18px; display: flex; flex-direction: column; flex: 1; }
.plat__nom { font-family: 'Lora', serif; font-size: var(--t-m); margin-bottom: 6px; }
.plat__desc {
  font-size: var(--t-s); color: var(--texte-doux); margin: 0 0 16px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* LES CARACTERISTIQUES. C'est ce qui manquait : le client veut savoir
   ce qu'il achete avant de le mettre au panier. */
.plat__traits {
  display: flex; flex-wrap: wrap; gap: 8px 16px;
  padding: 14px 0; margin-bottom: 14px;
  border-top: 1px solid var(--carte-bord);
  border-bottom: 1px solid var(--carte-bord);
}
.trait { display: flex; align-items: center; gap: 6px; font-size: var(--t-xs); }
.trait span:first-child { font-size: 14px; }
.trait span:last-child { color: var(--texte-faible); }

.plat__pied {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin-top: auto;
}
.plat__prix { line-height: 1.2; }
.plat__prix b {
  font-family: 'Lora', serif; font-size: var(--t-m);
  font-weight: 600; color: var(--corail); display: block;
}
.plat__prix s { font-size: var(--t-xs); color: var(--texte-faible); margin-right: 6px; }
.plat__prix small { font-size: var(--t-xs); color: var(--texte-faible); }

.ajouter {
  padding: 11px 20px; border-radius: var(--pilule);
  border: none; background: var(--safran); color: var(--abysse);
  font-family: inherit; font-size: var(--t-s); font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: background .16s, transform .14s;
}
.ajouter:hover { background: var(--safran-clair); transform: translateY(-1px); }
.ajouter.mis { background: var(--lagon); color: #fff; }

.groupe__nom {
  font-family: 'Lora', serif; font-size: var(--t-l);
  margin: 40px 0 20px; padding-bottom: 12px;
  border-bottom: 1px solid var(--carte-bord);
}
.groupe:first-child .groupe__nom { margin-top: 0; }

/* ═══════════════ SERVICES ET ADRESSES ═══════════════ */

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 880px) { .services { grid-template-columns: 1fr; } }
.service { padding: 4px 0 4px 22px; border-left: 2px solid var(--safran); }
.service h3 { font-size: var(--t-m); margin-bottom: 8px; }
.service p { font-size: var(--t-s); color: var(--texte-doux); margin: 0; }

.adresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 780px) { .adresses { grid-template-columns: 1fr; } }
.adresse {
  background: var(--carte); border: 1px solid var(--carte-bord);
  border-radius: var(--rayon); padding: 24px;
}
.adresse h3 { font-size: var(--t-m); }
.adresse__ligne {
  display: flex; gap: 10px; margin-top: 10px;
  font-size: var(--t-s); color: var(--texte-doux);
}
.adresse__ligne a:hover { color: var(--safran); }

/* ═══════════════ TELECHARGEMENT ═══════════════ */

.telecharger { padding: 66px 0; text-align: center; border-top: 1px solid var(--carte-bord); }
.telecharger h2 { font-size: clamp(1.6rem, 4vw, var(--t-xl)); }
.telecharger p { margin: 14px auto 28px; max-width: 52ch; font-size: var(--t-s); color: var(--texte-doux); }
.telecharger__actions { display: flex; gap: 13px; justify-content: center; flex-wrap: wrap; }
.telecharger__note { margin-top: 22px; font-size: var(--t-xs); color: var(--texte-faible); }

/* ═══════════════ PIED ═══════════════ */

.pied { padding: 40px 0; background: var(--fond-2); border-top: 1px solid var(--carte-bord); }
.pied__contenu { display: flex; justify-content: space-between; align-items: center; gap: 22px; flex-wrap: wrap; }
.pied__mentions { font-size: var(--t-xs); color: var(--texte-faible); line-height: 1.9; }
.pied__liens { display: flex; gap: 20px; font-size: var(--t-s); }
.pied__liens a { color: var(--texte-doux); }
.pied__liens a:hover { color: var(--safran); }

/* ═══════════════ WHATSAPP FLOTTANT ═══════════════ */

.flottant-whatsapp {
  position: fixed; right: 20px; bottom: 20px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-radius: var(--pilule);
  background: #25D366; color: #06251A;
  font-size: var(--t-s); font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  transition: transform .16s ease, box-shadow .2s ease;
}
.flottant-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0,0,0,.38); }
.flottant-whatsapp svg { width: 22px; height: 22px; flex: none; }
@media (max-width: 620px) {
  .flottant-whatsapp { padding: 14px; bottom: 100px; }
  .flottant-whatsapp span { display: none; }
}

/* ═══════════════ LE PANIER ═══════════════ */

.panier {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
  transform: translateY(110%); transition: transform .28s cubic-bezier(.2,.8,.2,1);
  background: var(--entete); backdrop-filter: blur(18px);
  border-top: 1px solid var(--safran);
}
.panier.visible { transform: translateY(0); }
.panier__barre {
  display: flex; align-items: center; gap: 16px;
  max-width: var(--largeur); margin: 0 auto; padding: 15px 22px;
}
.panier__compte {
  display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  border-radius: 50%; background: var(--safran); color: var(--abysse);
  font-size: var(--t-s); font-weight: 700;
}
.panier__resume {
  flex: 1; min-width: 0; background: none; border: none;
  text-align: left; cursor: pointer; padding: 0; font-family: inherit;
}
.panier__total { font-family: 'Lora', serif; font-size: var(--t-base); font-weight: 600; color: var(--texte); }
.panier__detail { font-size: var(--t-xs); color: var(--texte-faible); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.panier__actions { display: flex; gap: 9px; align-items: center; }
.panier__liste { max-height: 0; overflow: hidden; transition: max-height .28s ease; border-top: 1px solid var(--carte-bord); }
.panier.ouvert .panier__liste { max-height: 46vh; overflow-y: auto; }
.panier__ligne {
  display: flex; align-items: center; gap: 12px;
  max-width: var(--largeur); margin: 0 auto; padding: 12px 22px;
  border-bottom: 1px solid var(--carte-bord);
}
.panier__ligne:last-child { border-bottom: none; }
.panier__nom { flex: 1; min-width: 0; font-size: var(--t-s); }
.panier__nom small { display: block; color: var(--texte-faible); font-size: var(--t-xs); }
.quantite { display: flex; align-items: center; gap: 4px; }
.quantite button {
  width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--carte-bord); background: transparent;
  color: var(--texte); font-size: var(--t-base); font-family: inherit;
  cursor: pointer; line-height: 1;
}
.quantite button:hover { border-color: var(--safran); color: var(--safran); }
.quantite span { min-width: 26px; text-align: center; font-size: var(--t-s); font-weight: 600; }
@media (max-width: 620px) {
  .panier__barre { gap: 10px; padding: 12px 16px; }
  .panier__detail { display: none; }
}

/* ═══════════════ ETATS ═══════════════ */

.squelette {
  border-radius: var(--rayon); aspect-ratio: 4/3.4;
  background: linear-gradient(90deg, var(--squelette-a) 25%,
              var(--squelette-b) 50%, var(--squelette-a) 75%);
  background-size: 200% 100%; animation: glisser 1.4s infinite;
}
@keyframes glisser { to { background-position: -200% 0; } }

.vide { padding: 48px 20px; text-align: center; color: var(--texte-faible); font-size: var(--t-s); }

.mot {
  position: fixed; left: 50%; bottom: 104px; z-index: 80;
  transform: translate(-50%, 16px); padding: 12px 22px;
  border-radius: var(--pilule); background: var(--lagon); color: #fff;
  font-size: var(--t-s); font-weight: 600;
  opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.mot.visible { opacity: 1; transform: translate(-50%, 0); }


/* ==========================================================================
   LA FENETRE DE PLAT
   --------------------------------------------------------------------------
   LE MECANISME DE GEST-CAR, repris tel quel parce qu'il fonctionne.

   La fenetre est CREEE AU CLIC et ajoutee au document, puis retiree a la
   fermeture. Elle n'existe pas dans le HTML.

   POURQUOI CELA CHANGE TOUT

   Ma version precedente posait la fenetre dans la page et la rendait
   visible par une classe. Si une seule regle de style manque ou arrive
   apres, la classe s'ajoute et RIEN NE S'AFFICHE : le clic semble sans
   effet alors que le code a bien tourne.

   Un element cree au clic naît visible. Il n'y a pas d'etat
   intermediaire ou il existe sans se voir.
   ========================================================================== */

.voile {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(3, 12, 16, .8);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  padding: 20px;
  overflow-y: auto;
  animation: paraitre .18s ease;
}
@keyframes paraitre { from { opacity: 0; } to { opacity: 1; } }

.fenetre {
  width: min(820px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--carte);
  border: 1px solid var(--carte-bord);
  border-radius: var(--rayon);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  animation: monter .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes monter {
  from { transform: translateY(18px) scale(.98); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── LA GALERIE ── */

.galerie {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--fond-3);
  overflow: hidden;
}
.galerie img { width: 100%; height: 100%; object-fit: cover; }
.galerie .vide {
  height: 100%; display: grid; place-items: center; font-size: 52px;
}

.fermer {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 40px; height: 40px; border-radius: 50%;
  border: none; background: rgba(7, 26, 32, .74); color: #fff;
  font-size: 19px; line-height: 1; cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .16s;
}
.fermer:hover { background: var(--corail); }

.compteur {
  position: absolute; bottom: 12px; right: 14px; z-index: 2;
  padding: 4px 11px; border-radius: var(--pilule);
  background: rgba(7, 26, 32, .76); color: var(--creme);
  font-size: var(--t-xs); font-weight: 600;
}

/* Les vignettes. Elles changent la grande image au clic — le meme
   principe que gest-car. */
.vignettes {
  display: flex; gap: 8px; padding: 11px 14px;
  overflow-x: auto;
  border-bottom: 1px solid var(--carte-bord);
}
.vignettes img {
  width: 70px; height: 52px; flex: none;
  object-fit: cover; border-radius: 9px; cursor: pointer;
  border: 2px solid transparent; opacity: .6;
  transition: border-color .16s, opacity .16s;
}
.vignettes img.actif { border-color: var(--safran); opacity: 1; }
.vignettes img:hover { opacity: 1; }

/* ── LE DETAIL ── */

.detail { padding: 22px 24px 26px; }

.detail__entete {
  display: flex; justify-content: space-between;
  align-items: flex-start; gap: 16px; flex-wrap: wrap;
  margin-bottom: 6px;
}
.detail h2 {
  font-family: 'Lora', serif; font-size: clamp(1.35rem, 4vw, 1.7rem);
  line-height: 1.15;
}
.detail__prix { text-align: right; white-space: nowrap; }
.detail__prix b {
  font-family: 'Lora', serif; font-size: clamp(1.35rem, 4vw, 1.7rem);
  font-weight: 600; color: var(--corail); display: block; line-height: 1.15;
}
.detail__prix s { font-size: var(--t-s); color: var(--texte-faible); }
.detail__prix small { font-size: var(--t-xs); color: var(--texte-faible); }

.detail__resume {
  color: var(--texte-faible); font-size: var(--t-s);
  margin-bottom: 14px;
}
.detail p.description {
  margin: 0 0 18px; color: var(--texte-doux);
  font-size: var(--t-s); line-height: 1.7;
}

/* LA GRILLE DE CARACTERISTIQUES, comme la « fiche » de gest-car :
   de petites cases avec une etiquette et une valeur. */
.caracteristiques {
  display: grid; gap: 10px; margin-bottom: 18px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
.caracteristiques div {
  background: var(--fond-3); border-radius: 12px; padding: 12px 14px;
}
.caracteristiques small {
  display: block; color: var(--texte-faible);
  font-size: 11.5px; margin-bottom: 3px;
}
.caracteristiques b { font-size: 15px; }

.bloc { margin-bottom: 18px; }
.bloc h4 {
  font-family: 'Poppins', sans-serif; font-size: var(--t-s);
  font-weight: 600; margin: 0 0 9px;
}
.etiquettes { display: flex; flex-wrap: wrap; gap: 7px; }
.etiquette {
  padding: 5px 12px; border-radius: var(--pilule);
  background: var(--fond-3); color: var(--texte-doux);
  font-size: var(--t-xs);
}
.etiquette--alerte { background: rgba(226,80,60,.14); color: var(--corail); }

/* ── LA COMMANDE ── */

.commande {
  border-top: 1px solid var(--carte-bord);
  padding-top: 18px;
}
.champ { margin-bottom: 15px; }
.champ > label {
  display: block; font-size: var(--t-s); font-weight: 600; margin-bottom: 8px;
}
.champ__aide {
  font-size: var(--t-xs); color: var(--texte-faible);
  font-weight: 400; display: block; margin-top: 2px;
}
.champ input[type="text"], .champ textarea {
  width: 100%; padding: 12px 14px;
  border-radius: var(--rayon-petit);
  border: 1px solid var(--carte-bord);
  background: var(--fond); color: var(--texte);
  font-family: inherit; font-size: var(--t-s); resize: vertical;
}
.champ input:focus, .champ textarea:focus {
  outline: none; border-color: var(--safran);
}

.modes { display: flex; gap: 8px; flex-wrap: wrap; }
.mode {
  flex: 1; min-width: 128px;
  padding: 11px 13px; border-radius: var(--rayon-petit);
  border: 1px solid var(--carte-bord); background: transparent;
  font-family: inherit; font-size: var(--t-s); color: var(--texte);
  cursor: pointer; text-align: left;
  transition: border-color .16s, background .16s;
}
.mode:hover { border-color: var(--safran); }
.mode.actif { border-color: var(--safran); background: rgba(240,162,39,.1); }
.mode b { display: block; font-weight: 600; }
.mode em { font-style: normal; font-size: var(--t-xs); color: var(--texte-faible); }

.actions {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-top: 18px;
}
.actions .total {
  flex: 1; min-width: 130px;
  font-family: 'Lora', serif; font-size: var(--t-m); font-weight: 600;
}
.actions .total small {
  display: block; font-family: 'Poppins', sans-serif;
  font-size: var(--t-xs); color: var(--texte-faible); font-weight: 400;
}

.note-commande {
  margin-top: 14px; font-size: var(--t-xs);
  color: var(--texte-faible); line-height: 1.6;
}

/* LA CARTE ENTIERE EST CLIQUABLE — comme chez gest-car. */
.plat { cursor: pointer; }

@media (max-width: 560px) {
  .voile { padding: 0; }
  .fenetre { max-height: 100vh; border-radius: 0; border: none; }
  .detail { padding: 20px 18px 24px; }
}