/* ==========================================================================
   La Mie Sauvage · direction « Le coup de lame »
   Toutes les couleurs sortent du pain : croûte très cuite, farine, mie, et la
   grigne dorée pour seul accent. Polices : Rakkas (des lettres taillées, comme
   à la lame) et Schibsted Grotesk (nette, lisible sur un téléphone).
   ========================================================================== */
:root {
  --croute: #170c06;
  --croute-claire: #2c1a0e;
  --farine: #f8f0e0;
  --farine-douce: #dacbb2;
  --mie: #f8eeda;
  --mie-ombre: #ecdbb8;
  --grigne: #e8871e;
  --encre: #1c0f08;
  --encre-douce: #55412f;

  --fond: var(--mie);
  --surface: var(--mie);
  --texte: var(--encre);
  --texte-doux: var(--encre-douce);
  --accent: var(--grigne);
  --accent-texte: var(--encre);
  --titre: "Rakkas", Georgia, serif;
  --corps: "Schibsted Grotesk", system-ui, sans-serif;
  --t-corps: clamp(1.03rem, 1rem + .15vw, 1.0875rem);
  --marge: clamp(1.25rem, 4vw, 3.5rem);

  --nav-hauteur: 60px;
  --nav-fond: var(--croute);
  --nav-texte: var(--farine);
  --nav-bord: rgb(248 240 224 / .16);
  --nav-actif: rgb(248 240 224 / .12);
  --carte-filet: rgb(28 15 8 / .16);

  --filigrane-fond: var(--mie);
  --filigrane-texte: var(--encre);
  --filigrane-bord: rgb(28 15 8 / .28);
  --filigrane-point: var(--grigne);
  --assistant-fond: var(--grigne);
  --assistant-texte: var(--encre);
  --assistant-panneau: var(--mie);
  --assistant-panneau-texte: var(--encre);
  --assistant-bord: rgb(28 15 8 / .18);
  --assistant-bulle: var(--mie-ombre);

  /* La croûte : un grain de farine sur un fond très cuit. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .86 0 0 0 0 .7 0 0 0 .9 -.42'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  /* La mie : des alvéoles irrégulières, à peine plus sombres que le fond. */
  --alveoles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 340 340'%3E%3Cg fill='%23f3e6cc'%3E%3Cpath d='M46 28c15-7 37-3 42 11s-7 31-26 33-33-8-33-21 5-17 17-23z'/%3E%3Cpath d='M214 18c9-3 20 2 21 11s-8 15-17 13-15-7-14-14 3-8 10-10z'/%3E%3Cpath d='M276 92c21-9 48 2 49 24s-20 40-44 36-34-19-30-35 9-19 25-25z'/%3E%3Cpath d='M128 112c12-6 28-1 30 12s-10 26-25 24-23-11-21-21 6-12 16-15z'/%3E%3Cpath d='M26 172c17-6 36 3 37 19s-15 31-33 27-25-14-22-27 6-15 18-19z'/%3E%3Cpath d='M186 210c26-10 56 2 56 30s-26 46-54 41-39-23-34-42 12-22 32-29z'/%3E%3Cpath d='M92 284c10-4 22 1 23 11s-9 17-19 15-16-8-15-15 3-8 11-11z'/%3E%3Cpath d='M300 276c8-3 18 1 18 9s-7 14-15 12-13-6-12-12 2-7 9-9z'/%3E%3Ccircle cx='172' cy='62' r='7'/%3E%3Ccircle cx='96' cy='206' r='6'/%3E%3Ccircle cx='250' cy='186' r='5'/%3E%3Ccircle cx='20' cy='112' r='5'/%3E%3Ccircle cx='150' cy='318' r='6'/%3E%3C/g%3E%3C/svg%3E");

  /* Les entailles de la vitrine : un fuseau fermé, puis ouvert. */
  --fente-ouverte: polygon(5.0% 97.0%,15.6% 98.9%,23.1% 97.9%,29.8% 96.2%,36.2% 94.1%,42.1% 91.6%,47.8% 88.8%,53.1% 85.7%,58.2% 82.4%,62.9% 78.8%,67.4% 74.9%,71.7% 70.7%,75.6% 66.3%,79.3% 61.7%,82.7% 56.7%,85.8% 51.5%,88.7% 46.1%,91.2% 40.3%,93.4% 34.3%,95.3% 27.9%,96.7% 21.0%,97.4% 13.5%,95.0% 3.0%,84.4% 1.1%,76.9% 2.1%,70.2% 3.8%,63.8% 5.9%,57.9% 8.4%,52.2% 11.2%,46.9% 14.3%,41.8% 17.6%,37.1% 21.2%,32.6% 25.1%,28.3% 29.3%,24.4% 33.7%,20.7% 38.3%,17.3% 43.3%,14.2% 48.5%,11.3% 53.9%,8.8% 59.7%,6.6% 65.7%,4.7% 72.1%,3.3% 79.0%,2.6% 86.5%);
  --fente-fermee: polygon(5.0% 97.0%,9.3% 92.9%,13.4% 88.7%,17.6% 84.5%,21.8% 80.3%,25.9% 76.1%,30.0% 71.8%,34.2% 67.6%,38.3% 63.3%,42.4% 59.1%,46.5% 54.8%,50.6% 50.6%,54.7% 46.3%,58.7% 42.0%,62.8% 37.7%,66.9% 33.4%,70.9% 29.1%,75.0% 24.8%,79.0% 20.5%,83.1% 16.1%,87.1% 11.8%,91.1% 7.4%,95.0% 3.0%,90.7% 7.1%,86.6% 11.3%,82.4% 15.5%,78.2% 19.7%,74.1% 23.9%,70.0% 28.2%,65.8% 32.4%,61.7% 36.7%,57.6% 40.9%,53.5% 45.2%,49.4% 49.4%,45.3% 53.7%,41.3% 58.0%,37.2% 62.3%,33.1% 66.6%,29.1% 70.9%,25.0% 75.2%,21.0% 79.5%,16.9% 83.9%,12.9% 88.2%,8.9% 92.6%);
  --fente-bord-ouvert: polygon(5.0% 97.0%,16.0% 99.4%,23.8% 98.6%,30.8% 97.1%,37.2% 95.1%,43.3% 92.8%,49.1% 90.1%,54.5% 87.1%,59.7% 83.8%,64.5% 80.3%,69.0% 76.4%,73.3% 72.3%,77.2% 67.9%,80.9% 63.2%,84.2% 58.2%,87.3% 52.9%,90.0% 47.4%,92.4% 41.5%,94.5% 35.3%,96.2% 28.7%,97.4% 21.7%,97.9% 13.9%,95.0% 3.0%,84.0% 0.6%,76.2% 1.4%,69.2% 2.9%,62.8% 4.9%,56.7% 7.2%,50.9% 9.9%,45.5% 12.9%,40.3% 16.2%,35.5% 19.7%,31.0% 23.6%,26.7% 27.7%,22.8% 32.1%,19.1% 36.8%,15.8% 41.8%,12.7% 47.1%,10.0% 52.6%,7.6% 58.5%,5.5% 64.7%,3.8% 71.3%,2.6% 78.3%,2.1% 86.1%);
  --fente-bord-ferme: polygon(5.0% 97.0%,9.4% 93.1%,13.7% 89.0%,17.9% 84.8%,22.2% 80.7%,26.3% 76.5%,30.5% 72.3%,34.7% 68.1%,38.8% 63.9%,42.9% 59.6%,47.1% 55.4%,51.2% 51.1%,55.2% 46.8%,59.3% 42.5%,63.4% 38.2%,67.4% 33.9%,71.4% 29.6%,75.4% 25.2%,79.4% 20.8%,83.4% 16.5%,87.3% 12.0%,91.3% 7.6%,95.0% 3.0%,90.6% 6.9%,86.3% 11.0%,82.1% 15.2%,77.8% 19.3%,73.7% 23.5%,69.5% 27.7%,65.3% 31.9%,61.2% 36.1%,57.1% 40.4%,52.9% 44.6%,48.8% 48.9%,44.8% 53.2%,40.7% 57.5%,36.6% 61.8%,32.6% 66.1%,28.6% 70.4%,24.6% 74.8%,20.6% 79.2%,16.6% 83.5%,12.7% 88.0%,8.7% 92.4%);
}

h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: .98; margin: 0; text-wrap: balance; }
p { margin: 0 0 1em; }
a, button { cursor: pointer; }

/* Le filigrane : toujours lisible, moins présent tant qu'on ne le vise pas. */
.filigrane-demo { opacity: .82; transition: opacity .2s ease; }
.filigrane-demo:hover, .filigrane-demo:focus-visible { opacity: 1; }

.surtitre { font-weight: 800; font-size: .92rem; line-height: 1.2; margin: 0 0 .8rem; }
.surtitre::before {
  content: ""; display: inline-block; width: .55em; height: 1em; margin-right: .5em; vertical-align: -.12em;
  background: var(--grigne); clip-path: polygon(0 100%, 30% 45%, 100% 0, 75% 58%);
}

/* La planche de motifs ne prend aucune place. */
.planche-motifs { position: absolute; width: 0; height: 0; overflow: hidden; }
.entaille__bord { fill: currentColor; }
.entaille__coeur { fill: var(--grigne); }
.motif { display: block; width: 5.6rem; height: 2.8rem; color: var(--croute); }

/* Le bouton : plein, taillé en biais, comme une entaille couchée. */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 2.1rem;
  border: 0; border-radius: .35rem 1.4rem .35rem 1.4rem; background: var(--grigne); color: var(--encre);
  font-weight: 800; font-size: 1.1rem; line-height: 1.1; text-decoration: none;
  box-shadow: 0 8px 22px rgb(0 0 0 / .32);
  transition: transform .2s ease;
}
.bouton:hover { transform: translateY(-2px); }
.bouton:active { transform: scale(.97); }

/* ---------------- La barre ---------------- */
.navigation__nom { font-size: 1.5rem; color: var(--farine); }
.navigation__appel { border-radius: .3rem 1rem .3rem 1rem; }
.navigation__appel:hover { filter: brightness(1.08); }
@media (max-width: 760px) {
  .navigation { padding: 0 .75rem; }
  .navigation__nom { display: inline-flex; font-size: 1.42rem; }
  .navigation__liens { display: none; }
  .navigation__appel { flex: none; padding: 0 1.05rem; }
}

/* ---------------- 1. Le dessus d'un pain ---------------- */
.accueil { --longueur: 270svh; }
.accueil .scene__collant { background: var(--croute) var(--grain); color: var(--farine); touch-action: pan-y pinch-zoom; }
.accueil .toile { z-index: 1; opacity: 0; transition: opacity .3s linear; touch-action: pan-y pinch-zoom; }
.accueil.pain-cuit .toile { opacity: 1; }
/* Toile abandonnée (téléphone trop lent, contexte perdu) : retirée, le SVG reprend. */
.accueil:not(.toile-prete) .toile { visibility: hidden; }

/* Sans WebGL, la mie monte en aplat quand on défile. */
.voile-mie { position: absolute; inset: 0; z-index: 1; background: var(--mie-ombre) var(--alveoles); transform: translateY(calc((1 - var(--q, 0)) * 101%)); }
.accueil.toile-prete .voile-mie, html:not(.socle-actif) .voile-mie { display: none; }

.accueil__textes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.temps { position: absolute; left: 0; right: 0; }
.temps a { pointer-events: auto; }
.temps--croute {
  top: var(--nav-hauteur); bottom: 0;
  display: flex; flex-direction: column; align-items: flex-start;
  padding: .9rem var(--marge) calc(4.9rem + env(safe-area-inset-bottom));
  transition: opacity .14s linear, visibility 0s linear .14s;
}
.accueil.est-partie .temps--croute { opacity: 0; visibility: hidden; }
.accueil.est-partie .temps--croute a { pointer-events: none; }
.tampon {
  display: inline-block; margin: 0; padding: .38rem .8rem;
  border-radius: .25rem .9rem .25rem .9rem; background: var(--farine); color: var(--encre);
  font-weight: 800; font-size: .86rem; line-height: 1.2;
}
.nom {
  margin: .55rem 0 0; color: var(--farine);
  font-size: min(27.2vw, 14.8svh); line-height: .86; letter-spacing: -.005em;
}
.nom span { display: block; }
.accueil__libre { position: relative; flex: 1 1 0; min-height: 0; width: 100%; align-self: stretch; margin: .75rem 0 .4rem; }
.accueil__libre svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.repli-entaille path:first-child { fill: var(--grigne); }
.repli-entaille path:last-child { fill: var(--mie); }
/* Les entailles ne s'affichent pas toutes faites avant que la lame passe : le SVG
   revient si le WebGL est refusé, et de lui-même au bout de 3 s si rien n'a démarré. */
.socle-actif .accueil:not(.toile-prete):not([data-repli]) .repli-webgl { opacity: 0; animation: entailles-apparaissent .3s linear 3s forwards; }
@keyframes entailles-apparaissent { to { opacity: 1; } }
.accueil__bas { align-self: stretch; }
.accroche { margin: 0 0 .85rem; font-weight: 700; font-size: 1.2rem; line-height: 1.25; color: var(--farine); }
.accueil__bas .bouton { width: 100%; }

@media (max-height: 700px) and (max-width: 760px) {
  .accroche { font-size: 1.08rem; margin-bottom: .55rem; }
  .accueil__bas .bouton { min-height: 50px; }
  .temps--croute { padding-top: .6rem; padding-bottom: calc(4.4rem + env(safe-area-inset-bottom)); }
}

/* Deuxième temps : l'écran n'est plus que de la mie. */
.temps--mie {
  inset: var(--nav-hauteur) 0 0 0; padding: clamp(1.4rem, 5svh, 3rem) var(--marge) 5rem;
  color: var(--encre); opacity: 0; visibility: hidden; transition: opacity .16s linear, visibility 0s linear .16s;
}
.accueil.est-dedans .temps--mie { opacity: 1; visibility: visible; transition-delay: 0s; }
.temps--mie h2 { font-size: clamp(4.2rem, 21.5vw, 8.5rem); line-height: .9; margin-bottom: .9rem; }
.temps--mie p { font-weight: 700; font-size: 1.22rem; line-height: 1.3; margin: 0 0 1.1rem; }
.dedans__suite { display: none; }
.accueil:not(.toile-prete) .dedans__appui { display: none; }
.accueil:not(.toile-prete) .dedans__suite { display: block; }
.temps__corps { width: fit-content; max-width: 100%; }

/* Sans le socle (mouvement réduit, sans JavaScript) : une suite de blocs dans le flux. */
html:not(.socle-actif) .accueil { height: auto; }
html:not(.socle-actif) .accueil .scene__collant { position: static; height: auto; overflow: visible; background: none; }
html:not(.socle-actif) .accueil .toile { display: none; }
html:not(.socle-actif) .accueil__textes { position: static; }
html:not(.socle-actif) .temps { position: static; opacity: 1; visibility: visible; pointer-events: auto; }
html:not(.socle-actif) .temps--croute { background: var(--croute) var(--grain); padding-top: calc(var(--nav-hauteur) + 1rem); padding-bottom: 2.5rem; }
html:not(.socle-actif) .accueil__libre { flex: none; height: 15rem; }
html:not(.socle-actif) .temps--mie { background: var(--mie-ombre) var(--alveoles); padding-top: 2.5rem; padding-bottom: 3.5rem; }

/* ---------------- 2. La carte d'exemple : une tranche, la croûte en haut ---------------- */
.carte-resto { position: relative; background: var(--mie) var(--alveoles); padding: 0 var(--marge) 4rem; }
.tranche { display: block; max-width: none; width: calc(100% + 2 * var(--marge)); margin: 0 calc(-1 * var(--marge)) 2.2rem; height: clamp(34px, 8vw, 54px); }
.tranche__croute { fill: var(--croute); }
.tranche__dore { fill: var(--grigne); }
.carte-resto__tete h2 { font-size: clamp(4.4rem, 26vw, 10rem); line-height: .9; white-space: nowrap; }
.carte-resto__tete .motif { margin: .7rem 0 1.2rem; }
.mention-exemple {
  margin: 0 0 1.5rem; padding: .8rem 1rem; border-radius: .3rem 1.1rem .3rem 1.1rem;
  background: var(--croute); color: var(--farine); font-weight: 700; font-size: 1.02rem; line-height: 1.35;
}
.carte-resto__onglets { gap: .45rem; margin-bottom: 1.5rem; }
.carte-resto__onglets [role="tab"] {
  min-height: 48px; padding: 0 1rem; border: 2px solid var(--encre); border-radius: .3rem 1rem .3rem 1rem;
  background: var(--mie); color: var(--encre); font-weight: 700; font-size: 1rem;
  transition: transform .15s ease;
}
.carte-resto__onglets [role="tab"]:active { transform: scale(.97); }
.carte-photos { display: grid; gap: .6rem; grid-template-columns: 1fr; margin: 0 0 1.1rem; }
.carte-photos--deux { grid-template-columns: 1fr 1fr; }
.carte-photo { position: relative; margin: 0; overflow: hidden; background: var(--mie-ombre); clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); }
.carte-photo img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.carte-photos--deux .carte-photo img { aspect-ratio: 1 / 1.1; }
.legende {
  display: inline-block; padding: .2rem .55rem; border-radius: .2rem .6rem .2rem .6rem;
  background: var(--croute); color: var(--farine); font-size: .74rem; font-weight: 600; line-height: 1.3;
}
.carte-photo .legende { position: absolute; left: .5rem; top: .5rem; }
.carte-resto__categorie { font-size: 2.6rem; }
.carte-resto__liste { display: block; }
.carte-resto__liste li {
  display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; align-items: baseline;
  padding: .85rem 0; border-bottom: 2px solid var(--carte-filet);
}
.carte-resto__liste strong { font-size: 1.14rem; font-weight: 800; }
.carte-resto__liste b { font: 400 1.62rem/1 var(--titre); white-space: nowrap; }
.carte-resto__liste span { grid-column: 1 / -1; margin-top: .15rem; }
.carte-resto__note { margin: 1.5rem 0 0; font-weight: 700; color: var(--encre-douce); }

/* ---------------- 3. La vitrine, vue par les entailles ---------------- */
.section { padding: clamp(3.5rem, 8vw, 6rem) var(--marge); }
.vitrine { background: var(--croute) var(--grain); color: var(--farine); overflow: clip; }
.vitrine__tete h2 { font-size: clamp(3.3rem, 17.2vw, 8rem); line-height: .9; margin-bottom: 1rem; }
.vitrine__tete p { font-size: 1.1rem; font-weight: 600; max-width: 34rem; margin: 0 0 1.5rem; color: var(--farine); }
.fentes { display: grid; gap: 0; }
.fente { position: relative; margin: 0; aspect-ratio: 1 / 1.05; }
.fente + .fente { margin-top: -9%; }
.fente::before, .fente__photo { position: absolute; inset: 0; }
.fente::before { content: ""; background: var(--grigne); clip-path: var(--fente-bord-ouvert); }
.fente__photo { clip-path: var(--fente-ouverte); background: var(--croute-claire); }
.fente__photo img { width: 100%; height: 100%; object-fit: cover; }
.fente .legende { position: absolute; right: 0; bottom: 8%; background: var(--farine); color: var(--encre); }
/* La fente s'ouvre quand elle entre à l'écran. */
.socle-actif .fente[data-revele] { opacity: 1; transform: none; filter: none; transition: none; }
.socle-actif .fente[data-revele]::before { clip-path: var(--fente-bord-ferme); transition: clip-path .95s cubic-bezier(.16, 1, .3, 1); }
.socle-actif .fente[data-revele] .fente__photo { clip-path: var(--fente-fermee); transition: clip-path 1.05s cubic-bezier(.16, 1, .3, 1); }
.socle-actif .fente[data-revele].est-visible::before { clip-path: var(--fente-bord-ouvert); }
.socle-actif .fente[data-revele].est-visible .fente__photo { clip-path: var(--fente-ouverte); }

/* ---------------- 4. L'idée de cette page ---------------- */
.idee { background: var(--mie) var(--alveoles); display: grid; gap: 2.6rem; }
.idee h2 { font-size: clamp(3.3rem, 16.2vw, 6.2rem); line-height: .92; margin-bottom: 1.1rem; }
.idee__texte p:not(.surtitre) { font-size: 1.1rem; max-width: 38rem; }
.idee__texte p:last-child { margin-bottom: 0; }
.idee__questions { background: var(--mie-ombre); padding: 1.5rem 1.2rem 1.3rem; border-radius: .4rem 1.8rem .4rem 1.8rem; }
.idee h3 { font-size: 2.5rem; line-height: 1; margin-bottom: .6rem; }
.idee__questions > p { color: var(--encre-douce); font-weight: 600; margin-bottom: .9rem; }
.questions { list-style: none; margin: 0; padding: 0; }
.questions li { display: grid; grid-template-columns: 1.5rem 1fr; gap: .65rem; align-items: center; padding: .7rem 0; font-weight: 700; font-size: 1.1rem; line-height: 1.25; border-top: 2px solid var(--carte-filet); }
.puce { width: 1.5rem; height: 1.8rem; color: var(--croute); }

/* ---------------- 5. Ce qu'il reste à remplacer ---------------- */
.remplacer { background: var(--grigne); color: var(--encre); }
.remplacer .surtitre::before { background: var(--croute); }
.remplacer h2 { font-size: clamp(3.3rem, 16.2vw, 6.2rem); line-height: .92; margin-bottom: 1.6rem; }
.remplacer__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.remplacer__liste li { padding: 1.1rem 1.2rem 1.05rem; border-radius: .4rem 1.6rem .4rem 1.6rem; background: var(--mie); }
.remplacer__liste .motif { width: 4.2rem; height: 2.1rem; margin-bottom: .5rem; }
.remplacer__liste strong { display: block; font: 400 1.9rem/1.02 var(--titre); margin-bottom: .35rem; }
.remplacer__liste p { margin: 0; color: var(--encre-douce); }

/* ---------------- 6. À Saint-Philippe ---------------- */
.infos { background: var(--mie) var(--alveoles); display: grid; gap: 1.4rem; }
.infos h2 { font-size: clamp(2.4rem, 14.4vw, 7rem); line-height: .92; margin-bottom: .6rem; }
.infos .motif { margin-bottom: .8rem; }
.infos p:last-child { margin: 0; font-size: 1.08rem; }
.carte-google { display: block; width: 100%; height: 340px; border: 0; border-radius: .4rem 1.8rem .4rem 1.8rem; background: var(--mie-ombre); }

/* ---------------- Pied de page ---------------- */
.pied { background: var(--croute) var(--grain); color: var(--farine); padding: 2.8rem var(--marge) calc(6.4rem + env(safe-area-inset-bottom)); }
.pied__nom { font: 400 3.4rem/.95 var(--titre); margin: 0 0 .6rem; }
.pied .motif { color: var(--farine); margin-bottom: 1rem; }
.pied p { max-width: 38rem; }
.pied a { color: inherit; font-weight: 700; }
.pied__credit { font-size: .94rem; color: var(--farine-douce); margin: 0; }
.pied__credit a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------------- Bureau et tablette ---------------- */
@media (min-width: 761px) {
  .temps--croute {
    display: grid; grid-template-columns: minmax(20rem, 11fr) 9fr; grid-template-rows: auto auto 1fr auto;
    column-gap: 2.5rem; padding-top: clamp(1.5rem, 6svh, 3.5rem); padding-bottom: 6rem; align-items: start;
  }
  .tampon { grid-column: 1; grid-row: 1; justify-self: start; }
  .nom { grid-column: 1; grid-row: 2; font-size: min(14vw, 30svh); }
  .accueil__bas { grid-column: 1; grid-row: 4; align-self: end; }
  .accueil__bas .bouton { width: auto; }
  .accroche { font-size: 1.45rem; }
  .accueil__libre { grid-column: 2; grid-row: 1 / -1; align-self: stretch; height: 100%; margin: 0; }
  .temps--mie { padding-top: clamp(2rem, 10svh, 6rem); }
  .temps--mie h2 { font-size: clamp(5rem, 13vw, 10rem); }
  .carte-resto { padding-bottom: 6rem; }
  .carte-resto__tete, .carte-resto__onglets, .carte-resto__note { max-width: 74rem; margin-inline: auto; }
  .carte-resto__panneau { display: grid; grid-template-columns: 5fr 7fr; gap: 3rem; align-items: start; max-width: 74rem; margin-inline: auto; }
  .vitrine > *, .remplacer > * { max-width: 74rem; margin-inline: auto; }
  .fentes { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
  .fente + .fente { margin-top: 0; }
  .idee { grid-template-columns: 7fr 5fr; gap: 3.5rem; align-items: start; padding-inline: max(var(--marge), calc((100% - 74rem) / 2)); }
  .remplacer__liste { grid-template-columns: repeat(3, 1fr); }
  .infos { grid-template-columns: 2fr 3fr; align-items: center; padding-inline: max(var(--marge), calc((100% - 74rem) / 2)); }
  .carte-google { height: 420px; }
}