/* Restaurant Ti Recif · direction « Le couvercle ».
   Le mur sombre et le feu de la couverture, le crème de ses affiches de menu. */

:root {
  /* Ses couleurs relevées */
  --nuit: #140c08;
  --creme: #f9f5e9;
  --cuivre: #87573a;
  /* Nuances tirées de ces couleurs, pour le contraste */
  --nuit-2: #241510;
  --nuit-3: #33201a;
  --braise: #e3a63f;
  --cuivre-fonce: #4b2a1b;
  --creme-2: #f1e9d6;
  --encre: #2a1810;
  --encre-douce: #5f4433;
  --creme-douce: #dccdb6;
  --filet-sombre: #5a4032;
  --filet-clair: #cdbba0;
  --turquoise: #35b5a7;
  --erreur-claire: #ffb49a;
  --erreur-sombre: #a12a12;


  /* Tokens du socle */
  --fond: var(--nuit);
  --surface: var(--nuit-2);
  --texte: var(--creme);
  --texte-doux: var(--creme-douce);
  --accent: var(--braise);
  --accent-texte: var(--nuit);
  --titre: "Young Serif", Georgia, serif;
  --corps: "Figtree", system-ui, sans-serif;
  --t-corps: 1.0625rem;
  --marge: clamp(1.15rem, 5vw, 3.5rem);
  --nav-hauteur: 3.5rem;
  --nav-fond: var(--nuit);
  --nav-texte: var(--creme);
  --nav-bord: var(--filet-sombre);
  --nav-actif: var(--nuit-3);
  --carte-filet: var(--filet-clair);
  --filigrane-fond: var(--nuit-2);
  --filigrane-texte: var(--creme);
  --filigrane-bord: var(--filet-sombre);
  --filigrane-point: var(--braise);
  --assistant-fond: var(--nuit-2);
  --assistant-texte: var(--creme);
}

body { background: var(--fond); color: var(--texte); font-family: var(--corps); font-size: var(--t-corps); }
.dessins { position: absolute; }
.navigation__nom { font-family: var(--titre); }
/* Sur tablette et petit bureau, la barre garde l'essentiel : Appeler reste à l'écran. */
@media (max-width: 1040px) { .navigation__bureau { display: none; } }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* --- Les ambiances de section : on change les tokens, pas les règles ---------- */
.creme {
  --fond: var(--creme);
  --surface: var(--creme-2);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --accent: var(--cuivre);
  --accent-texte: var(--creme);
  --ligne: var(--filet-clair);
  --champ-fond: var(--creme);
  --erreur: var(--erreur-sombre);
  background: var(--fond);
  color: var(--texte);
}
.foyer-fond {
  --ligne: var(--filet-sombre);
  --champ-fond: var(--nuit);
  --erreur: var(--erreur-claire);
  background: var(--fond);
  color: var(--texte);
}
.cuivre {
  --fond: var(--cuivre-fonce);
  --surface: var(--nuit-3);
  --ligne: var(--cuivre);
  --champ-fond: var(--nuit-2);
  --erreur: var(--erreur-claire);
  background: var(--fond);
  color: var(--texte);
}

section:not(.scene) { padding-block: clamp(3.5rem, 9vw, 6.5rem); scroll-margin-top: var(--nav-hauteur); }
.creme--bas { padding-top: 0 !important; }
.enveloppe { width: min(100% - 2 * var(--marge), 70rem); margin-inline: auto; }

/* --- Titres, surtitres, mentions ---------------------------------------------- */
.titre { font-family: var(--titre); font-weight: 400; font-size: clamp(3rem, 15vw, 6.5rem); line-height: 1; margin: 0; color: var(--accent); }
.titre--moyen { font-size: clamp(2.25rem, 10vw, 4rem); line-height: 1.06; }
.surtitre { margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.surtitre--sombre { margin-bottom: .75rem; letter-spacing: .06em; text-transform: none; font-size: .95rem; color: var(--texte-doux); }
/* Le trait ondulé du logo : le seul turquoise de la page, décoratif. */
.trait { display: block; width: 7rem; height: .85rem; margin-top: .9rem; color: var(--turquoise); }
.tete { margin-bottom: 2rem; }
.tete__plus { margin: 1rem 0; color: var(--texte-doux); max-width: 34rem; }
.mention {
  display: flex; align-items: center; gap: .65rem;
  width: fit-content; margin: 1.15rem 0 0; padding: .55rem .85rem;
  border: 1.5px solid var(--texte); border-radius: .5rem;
  font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--texte);
}
.mention__marmite { flex: none; width: 1.7rem; height: 1.55rem; color: var(--texte); }

/* --- Premier écran : mur sombre, foyer, boutons sur le muret ---------------------- */
.accueil .scene__collant { background: var(--nuit); overflow: hidden; height: 100svh; }
.accueil .toile, .accueil .repli-webgl { position: absolute; inset: 0; width: 100%; height: 100%; }
.accueil .repli-webgl { object-fit: cover; object-position: 50% 100%; }
.voile-repli { position: absolute; inset: 0; background: var(--creme); opacity: calc((var(--p, 0) - .35) * 2.4); pointer-events: none; }
.toile-prete .voile-repli { display: none; }
/* Repli : la toile est au-dessus de l'image dans la page, on la retire. */
.accueil[data-repli] .toile { display: none; }

.accueil__grille {
  position: relative; height: 100%;
  display: flex; flex-direction: column;
  padding: calc(var(--nav-hauteur) + .9rem) var(--marge) calc(4.4rem + env(safe-area-inset-bottom));
  transition: opacity .22s ease, visibility .22s;
}
.est-partie .accueil__grille { opacity: 0; visibility: hidden; }
.accueil__texte { flex: none; }
.accueil__foyer { flex: 1 1 auto; min-height: 8rem; }
.nom { margin: .35rem 0 0; font-family: var(--titre); font-weight: 400; color: var(--braise); line-height: .94; }
.nom__petit { display: block; font-size: clamp(1.6rem, 8vw, 2.6rem); line-height: 1.1; }
.nom__grand { display: block; font-size: clamp(4.3rem, 23vw, 8rem); letter-spacing: -.012em; }
.accueil__phrase { margin: .7rem 0 0; max-width: 24rem; font-size: 1.0625rem; line-height: 1.38; color: var(--creme); }
.accueil .guide { flex: none; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.accueil .guide__bouton { width: auto; padding-inline: .5rem; text-align: center; justify-content: center; min-height: 3.4rem; line-height: 1.15; }
.accueil .guide__bouton:not(.guide__bouton--principal) { background: var(--nuit); color: var(--creme); border-color: var(--creme); }

/* La phrase d'arrivée, posée sur la vapeur : même crème que la carte en dessous. */
.accueil__arrivee {
  position: absolute; left: var(--marge); right: var(--marge); top: 50%;
  width: fit-content; max-width: 22rem; margin: 0 auto; padding: .5rem .75rem;
  transform: translateY(-50%);
  background: var(--creme); color: var(--encre);
  font-family: var(--titre); font-size: clamp(1.8rem, 7.6vw, 2.8rem); line-height: 1.12; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}
.est-arrivee .accueil__arrivee { opacity: 1; visibility: visible; }

@media (min-width: 900px) {
  .accueil__grille {
    display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto; column-gap: 2.5rem; align-items: end;
    padding: calc(var(--nav-hauteur) + 2rem) var(--marge) 5rem;
  }
  .accueil__texte { grid-column: 1; grid-row: 1; align-self: end; }
  .accueil .guide { grid-column: 1; grid-row: 2; margin-top: 1.6rem; }
  .accueil__foyer { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; }
  .nom__grand { font-size: clamp(4.4rem, 7.6vw, 7.4rem); }
}

/* En mouvement réduit, le premier écran reste lisible, sans phrase d'arrivée. */
@media (prefers-reduced-motion: reduce) {
  .voile-repli, .accueil__arrivee { display: none; }
  .accueil { --longueur: 100svh !important; }
}

/* --- L'assiette en photo ------------------------------------------------------------ */
.assiette { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; margin: 0 0 2.5rem; }
.assiette__photo { width: min(100%, 22rem); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; flex-shrink: 0; }
.legende-photo { margin: .35rem 0 0; font-size: .78rem; color: var(--texte-doux); }
.assiette__titre { margin: 0 0 .3rem; font-family: var(--titre); font-size: 1.45rem; color: var(--accent); }
.assiette__texte p:not(.assiette__titre, .legende-photo) { margin: 0; color: var(--texte-doux); }
@media (min-width: 760px) {
  .assiette { flex-direction: row; gap: 2.5rem; }
  .assiette__texte { max-width: 24rem; }
}

/* --- La carte ----------------------------------------------------------------------- */
#carte { padding-top: 2rem; }
.carte-resto__onglets { margin-bottom: 1rem; }
.carte-resto__onglets [role="tab"] {
  min-height: 2.9rem; padding: .4rem .95rem; border-radius: 2rem;
  border: 1.5px solid var(--texte); background: transparent; color: var(--texte);
  font: 600 .98rem var(--corps); cursor: pointer;
}
.carte-resto__onglets [role="tab"][aria-selected="true"] { background: var(--accent); color: var(--accent-texte); border-color: var(--accent); }
.resume {
  display: flex; align-items: center; gap: .6rem;
  min-height: 3rem; margin-bottom: 1.5rem; padding: .35rem .95rem;
  background: var(--nuit); color: var(--creme); border-radius: .5rem;
  font-size: .95rem; text-decoration: none;
}
.resume__libelle { flex: 1; min-width: 0; }
.resume__total { font-weight: 700; white-space: nowrap; }
.resume__voir { color: var(--braise); font-weight: 700; text-decoration: underline; text-underline-offset: .18em; }
.carte-resto__categorie { margin: 0 0 .3rem; font-family: var(--titre); font-weight: 400; font-size: 1.75rem; color: var(--texte); }
.note-carte { margin: 0; color: var(--texte-doux); }
.plats { list-style: none; margin: .6rem 0 0; padding: 0; }
.plat {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; column-gap: .75rem;
  padding: .95rem 0; border-bottom: 1.5px dashed var(--ligne);
}
.plat__texte strong { display: block; font-size: 1.1rem; font-weight: 700; }
.plat__texte span { display: block; margin-top: .12rem; font-size: .96rem; line-height: 1.35; color: var(--texte-doux); }
.plat__prix { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ajouter {
  position: relative; flex: none; width: 2.9rem; height: 2.9rem; border-radius: 50%;
  border: 0; background: var(--accent); color: var(--accent-texte); cursor: pointer;
  font: 700 1rem var(--corps);
}
.ajouter::before, .ajouter::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1rem; height: 2.5px; background: currentColor;
  transform: translate(-50%, -50%); border-radius: 2px;
}
.ajouter::after { transform: translate(-50%, -50%) rotate(90deg); }
/* Une fois ajouté, le + laisse la place à la quantité. */
.ajouter[data-quantite]::before { content: attr(data-quantite); width: auto; height: auto; background: none; font-size: 1.05rem; }
.ajouter[data-quantite]::after { display: none; }
.vient-d-ajouter { animation: ajoute .32s ease; }
@keyframes ajoute { 40% { transform: scale(1.16); } }
@media (min-width: 760px) {
  .carte-resto__panneau, #carte .suite { max-width: 46rem; }
}

/* --- Formulaires, panier, confirmation ---------------------------------------------------- */
.enveloppe--deux { display: grid; gap: 1.6rem; }
.enveloppe--deux > * { min-width: 0; }
.bloc-form { background: var(--surface); padding: clamp(1.15rem, 4vw, 2rem); border-radius: .75rem; }
.formulaire { display: grid; gap: 1rem; }
.formulaire[hidden] { display: none; }
.champ { display: grid; gap: .3rem; min-width: 0; }
.champ label { font-weight: 700; font-size: .98rem; }
.champ input, .champ select {
  width: 100%; min-height: 3rem; padding: .55rem .75rem;
  border: 1.5px solid var(--texte-doux); border-radius: .4rem;
  background: var(--champ-fond); color: var(--texte); font: 400 1.0625rem var(--corps);
}
.champ input[aria-invalid="true"], .champ select[aria-invalid="true"] { border-color: var(--erreur); }
.champ__erreur { margin: 0; color: var(--erreur); font-size: .92rem; font-weight: 600; }
.champ__erreur:empty { display: none; }
.champs-duo { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: .7rem; }
.champs-duo input, .champs-duo select { min-width: 0; padding-inline: .5rem; font-size: 1rem; }
@media (max-width: 360px) { .champs-duo { grid-template-columns: minmax(0, 1fr); } }
.pas-a-pas { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .5rem; align-items: center; }
.pas-a-pas input { text-align: center; font-weight: 700; }
.quantite {
  width: 2.9rem; height: 2.9rem; flex: none; border-radius: 50%;
  border: 1.5px solid var(--texte); background: transparent; color: var(--texte);
  font: 700 1.3rem/1 var(--corps); cursor: pointer;
}
.bouton {
  display: inline-flex; align-items: center; justify-content: center; text-align: center;
  min-height: 3.2rem; padding: .6rem 1.35rem; border-radius: .5rem;
  border: 2px solid var(--accent); background: var(--accent); color: var(--accent-texte);
  font: 700 1.05rem var(--corps); text-decoration: none; cursor: pointer;
}
.bouton--contour, .bouton--doux { background: transparent; color: var(--texte); border-color: var(--texte); }
.formulaire__note { margin: 0; font-size: .95rem; color: var(--texte-doux); }

.panier { padding: clamp(1.15rem, 4vw, 2rem); background: var(--surface); border-radius: .75rem; }
.panier__titre { margin: 0 0 .5rem; font-family: var(--titre); font-weight: 400; font-size: 1.5rem; }
.panier__vide { margin: 0; color: var(--texte-doux); }
.panier__vide[hidden] { display: none; }
.panier__vide.est-signale { color: var(--erreur); font-weight: 600; }
.panier__alerte { margin: 0; color: var(--erreur); font-weight: 600; }
.panier__liste { list-style: none; margin: 0; padding: 0; }
.panier__ligne {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 1.6rem auto; align-items: center; gap: .4rem;
  padding: .55rem 0; border-bottom: 1.5px dashed var(--ligne);
}
.panier__nom { grid-column: 1 / -1; font-weight: 600; }
.panier__ligne .quantite:nth-of-type(1) { grid-column: 2; }
.panier__q { text-align: center; font-weight: 700; }
.panier__prix { grid-column: 1; grid-row: 2; font-weight: 700; font-variant-numeric: tabular-nums; }
.panier__pied { display: flex; justify-content: space-between; align-items: baseline; margin: .85rem 0 0; font-size: 1.15rem; }
.panier__pied[hidden] { display: none; }

.confirmation { outline: none; }
.confirmation[hidden] { display: none; }
.confirmation__marmite { display: block; width: 4.2rem; height: auto; overflow: visible; color: var(--accent); }
.confirmation__marmite path, .confirmation__marmite circle { fill: currentColor; }
.confirmation__marmite .anses { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.couvercle-leve { transform-box: fill-box; transform-origin: 90% 100%; }
.est-ouverte .couvercle-leve { animation: leve .7s .1s cubic-bezier(.3, 1.3, .6, 1) both; }
@keyframes leve { to { transform: translateY(-.5rem) rotate(14deg); } }
.confirmation__titre { margin: .9rem 0 .3rem; font-family: var(--titre); font-size: 1.5rem; }
.confirmation__texte { margin: 0 0 .9rem; }
.confirmation__mention { margin: 0 0 1.1rem; font-weight: 700; }
.suite--large { margin-top: .5rem; width: fit-content; }
@media (max-width: 640px) { .suite--large { width: 100%; } }

@media (min-width: 900px) {
  .enveloppe--deux { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 3rem; align-items: start; }
  .enveloppe--deux > .tete { grid-column: 1; grid-row: 1; margin-bottom: 0; }
  .enveloppe--deux > .bloc-form { grid-column: 2; grid-row: 1 / span 3; }
  .enveloppe--deux > .panier { grid-column: 1; grid-row: 2; }
  .enveloppe--deux > .suite { grid-column: 1; align-self: start; }
}

/* --- Ce qu'on fait ici -------------------------------------------------------------- */
.trois { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; }
.trois li { padding-top: 1rem; border-top: 2px solid var(--texte); }
.trois__photo { margin: 0 0 1rem; }
.trois__photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.trois h3 { margin: 0 0 .35rem; font-family: var(--titre); font-weight: 400; font-size: 1.5rem; }
.trois p { margin: 0; color: var(--texte-doux); }
@media (min-width: 760px) { .trois { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }

/* --- Nous trouver --------------------------------------------------------------------- */
.enveloppe--infos { display: grid; gap: 1.6rem; }
.enveloppe--infos > * { min-width: 0; }
.enveloppe--infos > .tete { margin-bottom: 0; }
.adresse { font-style: normal; font-size: 1.2rem; line-height: 1.4; }
.infos__tel { margin: .6rem 0 1.1rem; font-size: 1.5rem; font-family: var(--titre); }
.infos__tel a { color: var(--accent); }
.infos__boutons { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.horaires__titre { margin: 2rem 0 .25rem; font-family: var(--titre); font-weight: 400; font-size: 1.5rem; }
.horaires__note { margin: 0 0 .75rem; font-weight: 600; color: var(--texte-doux); font-size: .95rem; }
.horaires { margin: 0; }
.horaires div { padding: .6rem 0; border-top: 1.5px dashed var(--ligne); }
.horaires dt { font-weight: 700; }
.horaires dd { margin: 0; color: var(--texte-doux); }
.plan { background: var(--surface); border-radius: .75rem; overflow: hidden; height: 22rem; }
.carte-google { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 900px) {
  .enveloppe--infos { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 3rem; }
  .enveloppe--infos > .tete { grid-column: 1 / -1; }
  .plan { height: auto; min-height: 30rem; }
}

/* --- Pied : les quatre marmites, sur leur braise ----------------------------------------- */
.pied { background: var(--nuit); color: var(--creme); padding: 3rem var(--marge) 5.5rem; text-align: center; border-top: 6px solid var(--braise); }
.pied__marmites { display: block; width: min(13rem, 60vw); margin: 0 auto 1.5rem; color: var(--braise); }
.pied .suite { margin: 0 auto 1.5rem; width: fit-content; display: flex; }
.pied__texte { margin: 0 auto; max-width: 38rem; color: var(--creme-douce); }
.pied__credit { margin: .8rem 0 0; font-size: .72rem; color: var(--creme-douce); }
.pied__credit a { color: inherit; }