/* =====================================================================
   NAPOLÌ — Feuille de styles
   ---------------------------------------------------------------------
   Points de rupture (desktop first) :
     ≤ 900px  tablette
     ≤ 680px  mobile
     ≥ 1600px grand écran (contenu centré)

   Sommaire
     1.  Police & variables
     2.  Base
     3.  Typographie
     4.  Boutons & liens
     5.  Mise en page (sections)
     6.  Bandeau d'annonce
     7.  En-tête & navigation
     8.  Hero
     9.  Bande défilante
     10. 01 — Le panuozzo
     11. 02 — La carte
     12. 03 — L'esprit Napolì
     13. 04 — Devenir franchisé
     14. 05 — Nous trouver
     15. Pied de page
     16. Dialogue « À propos »
     17. Apparitions au défilement
     18. Accessibilité
     19. Mobile : textes centrés
   ===================================================================== */


/* 1. Police & variables
   ===================================================================== */

@font-face {
  font-family: Anton;
  src: url('assets/fonts/anton.ttf') format('truetype');
  font-display: swap;
}

:root {
  --green: #39472b;
  --pink: #ffedeb;
  --red: #bf3229;
}


/* 2. Base
   ===================================================================== */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
  /* ponytail : les éléments décoratifs hors-cadre (tampon, .reveal-right avant
     apparition) élargissaient la page. « clip » coupe sans créer de contexte de
     défilement, donc le header sticky continue de fonctionner. */
  overflow-x: clip;
}

body {
  /* Même coupe sur body : sur mobile, celle de html est reportée sur l'écran
     et ignorée, la page devenait plus large que l'écran (décalage à droite). */
  overflow-x: clip;
  margin: 0;
  background: var(--pink);
  color: var(--green);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

::selection {
  background: var(--green);
  color: var(--pink);
}

img {
  max-width: 100%;
  display: block;
}

address {
  font-style: normal;
  line-height: 1.8;
}

[hidden] {
  display: none !important;
}

@media (max-width: 680px) {
  html {
    scroll-padding-top: 80px;
  }
}


/* 3. Typographie
   ===================================================================== */

h1,
h2,
h3,
p {
  margin: 0;
}

/* Titres en Anton */
h1,
h2,
h3,
.ticker,
.stamp,
.paper-tag {
  font-family: Anton, Impact, 'Arial Narrow', sans-serif;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.025em;
}

h1 {
  font-size: clamp(64px, 7.3vw, 124px);
  letter-spacing: -.015em;
}

h1 em {
  display: inline-block;
  transform: rotate(-3deg);
}

h2 {
  font-size: clamp(44px, 5vw, 78px);
}

em {
  font-style: normal;
  color: var(--red);
}

/* Petit sur-titre au-dessus des titres */
.eyebrow {
  font-size: 12px;
  letter-spacing: 1.6px;
  font-weight: 800;
  margin-bottom: 24px;
}

@media (max-width: 680px) {
  h1 {
    font-size: clamp(59px, 12.8vw, 86px);
  }

  h2 {
    font-size: clamp(42px, 10vw, 66px);
  }

  .eyebrow {
    font-size: 10px;
    letter-spacing: 1.1px;
    margin-bottom: 20px;
  }
}


/* 4. Boutons & liens
   ===================================================================== */

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  cursor: pointer;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 6px;
}

.button {
  display: inline-flex;
  gap: 38px;
  align-items: center;
  justify-content: center;
  padding: 18px 25px;
  background: var(--green);
  color: var(--pink);
  font-weight: 700;
  font-size: 15px;
  border: 1px solid var(--green);
  transition: transform .2s, background .2s;
}

/* Icônes Lucide (assets/icons.svg) : même rendu sur tous les appareils,
   là où les flèches en texte devenaient des emojis sur iPhone */
.icon {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -.125em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ticker .icon {
  width: .6em;
  height: .6em;
  vertical-align: .05em;
  stroke-width: 3;
}

.button:hover {
  background: #26341b;
  transform: translateY(-3px);
}

.button.small {
  padding: 13px 20px;
  gap: 10px;
  font-size: 14px;
}

.text-link {
  display: inline-block;
  font-weight: bold;
  margin-top: 28px;
  border-bottom: 1px solid;
  padding-bottom: 5px;
}


/* 5. Mise en page (sections)
   ===================================================================== */

.section {
  padding: 95px 7%;
}

@media (min-width: 1600px) {
  .section {
    padding-left: max(7%, calc((100vw - 1450px) / 2));
    padding-right: max(7%, calc((100vw - 1450px) / 2));
  }
}

@media (max-width: 900px) {
  .section {
    padding: 70px 5%;
  }
}

@media (max-width: 680px) {
  .section {
    padding: 60px 6%;
  }
}


/* 6. Bandeau d'annonce
   ===================================================================== */

.announcement {
  background: var(--green);
  color: var(--pink);
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.3px;
}

@media (max-width: 680px) {
  .announcement {
    font-size: 10px;
    gap: 12px;
    letter-spacing: .5px;
  }

  .announcement span:nth-child(2) {
    font-size: 9px;
  }
}


/* 7. En-tête & navigation
   ===================================================================== */

header {
  height: 94px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  border-bottom: 1px solid #39472b40;
  background: var(--pink);
  position: sticky;
  top: 0;
  z-index: 20;
}

.logo {
  width: 150px;
  height: auto;
  object-fit: contain;
}

nav {
  display: flex;
  align-items: center;
  gap: 32px;
  font-size: 14px;
  font-weight: bold;
}

nav > a:not(.button):hover {
  text-decoration: underline;
  text-underline-offset: 6px;
}

/* Bouton « Menu » : visible uniquement sur mobile */
.nav-toggle {
  display: none;
}

@media (max-width: 900px) {
  nav {
    gap: 18px;
  }
}

@media (max-width: 680px) {
  header {
    height: 78px;
  }

  .logo {
    width: 125px;
  }

  .nav-toggle {
    display: block;
    border: 1px solid var(--green);
    background: none;
    color: inherit;
    padding: 9px 13px;
    font-size: 14px;
  }

  /* Menu déroulant, ouvert via la classe .open (app.js) */
  nav {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 78px;
    background: var(--pink);
    padding: 22px 5%;
    border-bottom: 1px solid var(--green);
    align-items: stretch;
    gap: 24px;
  }

  nav.open {
    display: flex;
    flex-direction: column;
  }
}


/* 8. Hero
   ===================================================================== */

.hero {
  padding: 48px 5% 0;
  position: relative;
  display: grid;
  grid-template-columns: 1.06fr 1fr;
  gap: 40px;
  overflow: hidden;
}

.hero-description {
  max-width: 410px;
  margin: 28px 0 24px;
  font-size: 16px;
  line-height: 1.65;
}

.hero-note {
  font-size: 12px;
  margin-top: 15px;
}

/* Photo inclinée */
.hero-visual {
  position: relative;
  margin: 4px 20px 18px 0;
  min-height: 500px;
  transform: rotate(3deg);
  background: var(--green);
  border: 10px solid var(--green);
}

.hero-food {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--green);
  color: var(--pink);
  padding: 8px 10px 13px;
  font-size: 11px;
  letter-spacing: 2px;
}

/* Tampon rond « Ciao Thonon » */
.stamp {
  position: absolute;
  right: -36px;
  top: 45px;
  width: 136px;
  height: 136px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--green);
  border: 2px solid var(--green);
  outline: 7px solid var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  transform: rotate(11deg);
  font-size: 24px;
}

.stamp strong {
  font-size: 30px;
  font-weight: 400;
}

.stamp span {
  font: 800 11px Arial;
  letter-spacing: 1px;
}

.hero-caption {
  position: absolute;
  bottom: 25px;
  left: -30px;
  background: var(--pink);
  padding: 13px 22px;
  font-size: 25px;
  font-weight: 900;
  line-height: 1.1;
  transform: rotate(-8deg);
  box-shadow: 5px 5px 0 var(--green);
}

.hero-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #39472b40;
  padding: 20px 0;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
}

@media (min-width: 1600px) {
  .hero {
    padding-left: max(7%, calc((100vw - 1450px) / 2));
    padding-right: max(7%, calc((100vw - 1450px) / 2));
  }
}

@media (max-width: 900px) {
  .hero {
    gap: 25px;
  }

  .hero-visual {
    min-height: 470px;
    margin-right: 10px;
  }

  .stamp {
    right: -15px;
    width: 110px;
    height: 110px;
  }

  .stamp strong {
    font-size: 24px;
  }

  /* « THONON-LES-BAINS » doit tenir sur une ligne dans le rond de 110 px */
  .stamp span {
    font-size: 8px;
    letter-spacing: .3px;
  }
}

@media (max-width: 680px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 32px 6% 0;
    gap: 32px;
  }

  .hero-description {
    margin-top: 22px;
  }

  .hero-visual {
    min-height: 440px;
    margin: 0 10px 8px;
    transform: rotate(2deg);
  }

  .hero-caption {
    left: -14px;
    font-size: 23px;
  }

  .stamp {
    right: -15px;
    top: 30px;
  }

  .hero-bottom {
    font-size: 9px;
    letter-spacing: .4px;
    gap: 20px;
  }
}


/* 9. Bande défilante
   ---------------------------------------------------------------------
   Le contenu contient deux blocs identiques : décaler de -50 % ramène
   le 2e bloc à la place du 1er, d'où une boucle continue.
   Durée à ajuster si on change le nombre de répétitions (18 s / répétition).
   ===================================================================== */

.ticker {
  position: relative;
  overflow: hidden;
  background: var(--red);
  color: var(--pink);
  padding: 22px 0;
  font-size: 38px;
  white-space: nowrap;
}

.ticker > div {
  display: flex;
  width: max-content;
  animation: marquee 126s linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (max-width: 680px) {
  .ticker {
    font-size: 30px;
    padding: 19px 0;
  }
}


/* 10. 01 — Le panuozzo
   ===================================================================== */

.intro {
  display: grid;
  grid-template-columns: .9fr 1fr;
  gap: 9%;
  align-items: center;
}

.bread-frame {
  height: 540px;
  position: relative;
}

.bread-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 48% 48% 0 0;
}

.paper-tag {
  position: absolute;
  left: -20px;
  bottom: 36px;
  background: var(--green);
  color: var(--pink);
  padding: 22px 26px;
  font-size: 28px;
  transform: rotate(-7deg);
}

.intro-copy > p:not(.eyebrow) {
  margin-top: 24px;
  max-width: 520px;
  line-height: 1.7;
}

.intro-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #39472b60;
  margin-top: 30px;
  padding-top: 24px;
  font-size: 13px;
}

.intro-footer img {
  width: 116px;
  height: auto;
  object-fit: contain;
}

@media (max-width: 900px) {
  .intro {
    gap: 6%;
  }

  .bread-frame {
    height: 490px;
  }
}

@media (max-width: 680px) {
  .intro {
    grid-template-columns: 1fr;
    gap: 46px;
  }

  .bread-frame {
    height: 410px;
    margin: 0 16px;
  }

  .paper-tag {
    font-size: 25px;
  }

  .intro-footer {
    font-size: 12px;
  }
}


/* 11. 02 — La carte
   ===================================================================== */

.menu {
  background: var(--green);
  color: var(--pink);
}

.menu em {
  color: var(--red);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 24px;
}

.section-heading > p {
  max-width: 300px;
  padding-bottom: 8px;
}

/* Filtres */
.menu-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 38px 0 14px;
}

.menu-controls button {
  border: 1px solid #ffedeb80;
  background: transparent;
  color: var(--pink);
  padding: 13px 19px;
  font-size: 14px;
  font-weight: bold;
}

.menu-controls button[aria-pressed=true] {
  background: var(--pink);
  color: var(--green);
}

.menu-controls span {
  font-size: 11px;
  margin-left: 14px;
}

/* Liste des plats */
.menu-highlights {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 14px;
  margin: 26px 0 20px;
}

.menu-highlight {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: 8px 16px;
  padding: 24px;
  background: var(--pink);
  color: var(--green);
  box-shadow: 5px 5px 0 #192111;
}

.menu-highlight:first-child { transform: rotate(-1deg); }
.menu-highlight-student { background: var(--red); color: var(--pink); transform: rotate(1deg); }
.menu-highlight > span { grid-column: 1 / -1; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; }
.menu-highlight h3 { font-size: 27px; line-height: 1.05; }
.menu-highlight strong { font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-highlight p { grid-column: 1 / -1; margin-top: 4px; font-size: 13px; line-height: 1.55; text-wrap: pretty; }

.menu-highlight-signature {
  min-height: 245px;
  padding-right: 44%;
  overflow: hidden;
}

.menu-highlight-signature p {
  position: relative;
  z-index: 1;
}

.menu-highlight-photo {
  position: absolute;
  right: -3%;
  top: 30px;
  width: 48%;
  height: 165px;
  object-fit: contain;
  filter: drop-shadow(0 14px 9px #18201045);
  transform: rotate(2deg);
}

.menu-category-visual {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  min-height: 290px;
  margin: 34px 0 12px;
  padding: 18px 5%;
  overflow: hidden;
  background: var(--red);
  color: var(--pink);
  transform: rotate(-.5deg);
  box-shadow: 7px 7px 0 #192111;
}

.menu-category-visual[hidden] {
  display: none;
}

.menu-category-visual img {
  width: 100%;
  height: 255px;
  object-fit: contain;
  filter: drop-shadow(0 18px 12px #10160b60);
}

.menu-category-visual figcaption span {
  display: block;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
}

.menu-category-visual figcaption strong {
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(38px, 5vw, 68px);
  font-weight: 400;
  line-height: .95;
}

.menu-category-visual-dessert {
  background: var(--pink);
  color: var(--green);
  transform: rotate(.5deg);
}

.menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 60px;
}

.menu-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 29px 0;
  border-bottom: 1px solid #ffedeb50;
}

.menu-group-title {
  grid-column: 1 / -1;
  margin-top: 22px;
  padding: 18px 22px;
  background: var(--red);
  color: var(--pink);
  font-size: clamp(29px, 3.5vw, 48px);
  letter-spacing: .01em;
  text-transform: uppercase;
  transform: rotate(-.5deg);
}

.menu-group-title:nth-of-type(even) {
  background: var(--pink);
  color: var(--green);
  transform: rotate(.5deg);
}

.menu-item-drink {
  min-height: 98px;
  align-content: center;
}

.menu-item-drink h3 {
  font-size: clamp(23px, 2.4vw, 30px);
}

.menu-item-photo {
  grid-column: 1 / -1;
  width: 100%;
  height: clamp(155px, 18vw, 245px);
  margin: -4px 0 2px;
  object-fit: contain;
  filter: drop-shadow(0 16px 10px #10160b55);
  transform: rotate(-1deg);
  transition: transform .35s ease;
}

.menu-item:nth-child(even) .menu-item-photo {
  transform: rotate(1deg);
}

.menu-item:hover .menu-item-photo {
  transform: translateY(-5px) rotate(0);
}

.menu-item h3 {
  font-size: 30px;
  letter-spacing: 0;
  text-transform: uppercase;
}

.menu-item .price {
  font-size: 20px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.menu-item p {
  grid-column: 1 / -1;
  max-width: 420px;
  color: #f0deda;
  font-size: 14px;
  line-height: 1.65;
}

.menu-item .tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 10px;
  padding: 5px 7px;
  border: 1px solid #ffedeb80;
  font-family: Arial;
  font-size: 10px;
  letter-spacing: 1px;
}

/* Suppléments */
.extras {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  border: 1px solid #ffedeb70;
  margin-top: 35px;
  padding: 20px 24px;
  font-size: 14px;
}

.extras > span {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 800;
}

.extras p > span {
  margin: 0 15px;
}

.menu-footnote {
  font-size: 12px;
  margin-top: 20px;
  color: #ebd6d1;
}

@media (max-width: 900px) {
  .menu-highlights { grid-template-columns: 1fr 1fr; }
  .menu-highlight:first-child { grid-column: 1 / -1; }

  .menu-grid {
    column-gap: 30px;
  }

  .extras {
    align-items: start;
    flex-direction: column;
  }

  .extras p > span {
    margin: 0 8px;
  }
}

@media (max-width: 680px) {
  .menu-highlights { grid-template-columns: 1fr; gap: 16px; margin-top: 24px; }
  .menu-highlight:first-child { grid-column: auto; }
  .menu-highlight { padding: 20px; box-shadow: 4px 4px 0 #192111; }
  .menu-highlight h3 { font-size: 25px; }
  .menu-highlight-signature { min-height: 310px; padding-right: 20px; padding-bottom: 142px; }
  .menu-highlight-signature p { max-width: none; }
  .menu-highlight-photo { top: auto; bottom: 4px; right: 4%; width: 92%; height: 145px; }
  .menu-category-visual { grid-template-columns: 1fr; gap: 4px; padding: 22px; text-align: center; }
  .menu-category-visual img { height: 205px; }
  .menu-category-visual figcaption strong { font-size: 42px; }

  .section-heading {
    align-items: start;
    flex-direction: column;
    gap: 24px;
  }

  .section-heading > p {
    font-size: 14px;
  }

  .menu-controls {
    gap: 7px;
    margin-top: 28px;
  }

  .menu-controls button {
    padding: 11px 10px;
    font-size: 12px;
  }

  .menu-controls span {
    margin-left: 5px;
    font-size: 10px;
  }

  .menu-grid {
    grid-template-columns: 1fr;
  }

  .menu-item {
    padding: 24px 0;
  }

  .menu-item-photo {
    height: min(52vw, 225px);
  }

  .menu-item h3 {
    font-size: 28px;
  }

  .menu-group-title {
    margin-top: 16px;
    padding: 15px 18px;
    font-size: 31px;
  }

  .menu-item-drink {
    min-height: 82px;
  }

  .menu-item .price {
    font-size: 18px;
  }

  .extras {
    padding: 18px;
    font-size: 13px;
  }

  /* Le « / » devient un simple retour à la ligne */
  .extras p > span {
    display: block;
    font-size: 0;
    margin: 7px;
  }
}


/* 12. 03 — L'esprit Napolì
   ===================================================================== */

.spirit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: #e7b8ac;
}

.spirit-copy {
  align-self: center;
  padding: 80px 14%;
}

.spirit-copy p:not(.eyebrow) {
  margin-top: 24px;
  line-height: 1.7;
}

.spirit figure {
  margin: 0;
  position: relative;
}

/* Carrousel : bande horizontale à défilement natif, une photo par écran */
.spirit figure {
  min-height: 520px;
}

/* En absolu : la hauteur de la section suit le texte, pas la photo la plus haute */
.spirit-slides {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.spirit-slides::-webkit-scrollbar {
  display: none;
}

.spirit figure img {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  scroll-snap-align: start;
}

.spirit-prev,
.spirit-next {
  position: absolute;
  bottom: 20px;
  width: 44px;
  height: 44px;
  border: 0;
  background: var(--pink);
  color: var(--green);
  font-size: 20px;
  cursor: pointer;
}

.spirit-prev {
  right: 72px;
}

.spirit-next {
  right: 20px;
}

.spirit figcaption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 11px;
  letter-spacing: 1px;
  background: #39472bd9;
  padding: 10px;
}

@media (max-width: 900px) {
  .spirit-copy {
    padding: 65px 10%;
  }
}

@media (max-width: 680px) {
  .spirit {
    grid-template-columns: 1fr;
  }

  .spirit-copy {
    padding: 60px 6%;
  }

  .spirit figure {
    min-height: 470px;
  }

  .spirit figure img {
    object-position: center 35%;
  }
}


/* 13. 04 — Devenir franchisé
   ===================================================================== */

.franchise {
  background: var(--green);
  color: var(--pink);
}

.franchise em { color: #f6b5a9; }

.franchise-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.franchise h2 { text-wrap: balance; }

.franchise-label {
  flex-shrink: 0;
  padding: 18px 22px;
  border: 1px solid #ffedeb80;
  transform: rotate(5deg);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  line-height: 1.8;
}

.franchise-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  margin-top: 30px;
}

.franchise-intro > p { max-width: 660px; line-height: 1.7; }

.franchise-cta {
  flex-shrink: 0;
  background: var(--pink);
  color: var(--green);
  border-color: var(--pink);
}

.franchise-cta:hover { background: #f6b5a9; }

.franchise-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding: 0;
  margin: 48px 0 64px;
}

.franchise-steps li { border-top: 1px solid #ffedeb60; padding-top: 24px; }
.franchise-number {
  display: block;
  margin-bottom: 20px;
  font: 400 44px/1 Anton, Impact, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #f6b5a9;
}
.franchise-steps h3 { font-size: 26px; margin-bottom: 14px; }
.franchise-steps p { font-size: 15px; line-height: 1.7; color: #f0deda; }

.franchise-application {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 48px;
  padding: 44px;
  background: var(--pink);
  color: var(--green);
  scroll-margin-top: 24px;
}

.franchise-application-copy h2 { font-size: clamp(36px, 4vw, 60px); }
.franchise-application-copy em { color: var(--red); }
.franchise-application-copy > p:not(.eyebrow) { margin-top: 24px; line-height: 1.7; }
.franchise-application-copy { min-width: 0; }
.franchise-form { min-width: 0; }
.franchise-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 18px; }
.franchise-field-wide { grid-column: 1 / -1; }
.franchise-field label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 700; }
.franchise-field label span { font-size: 12px; font-weight: 400; }
.franchise-field input,
.franchise-field textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 13px 14px;
  border: 1px solid #39472b70;
  border-radius: 0;
  background: #fff7f5;
  color: var(--green);
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.franchise-field textarea { resize: vertical; min-height: 144px; }
.franchise-field input::placeholder,
.franchise-field textarea::placeholder { color: #68715d; opacity: 1; }
.franchise-field input:focus-visible,
.franchise-field textarea:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.franchise-form-note { font-size: 13px; line-height: 1.6; }
.franchise-form > .franchise-form-note { margin: 18px 0; }
.franchise-form-note a { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }
.franchise-form .button { width: 100%; gap: 16px; min-height: 48px; }
.franchise-form .button:active { transform: scale(.96); }
.franchise-form .button:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.franchise-form-status { margin-top: 16px; font-size: 14px; line-height: 1.6; }
.franchise-form-status:empty { display: none; }
/* Champ piège anti-robots : hors écran, pas display:none (certains robots l’ignorent alors) */
.franchise-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.footer-franchise { display: inline-flex; align-items: center; min-height: 40px; margin-top: 8px; text-decoration: underline; text-underline-offset: 4px; }

/* Le lien franchise allonge la navigation : menu compact dès la tablette. */
@media (min-width: 681px) and (max-width: 1050px) {
  .nav-toggle { display: block; border: 1px solid var(--green); background: none; color: inherit; padding: 10px 14px; min-height: 44px; }
  nav { display: none; position: absolute; left: 0; right: 0; top: 94px; padding: 24px 5%; background: var(--pink); border-bottom: 1px solid var(--green); }
  nav.open { display: flex; flex-direction: column; align-items: stretch; gap: 24px; }
}

@media (max-width: 1050px) {
  .franchise-heading { align-items: flex-start; }
  .franchise-label { display: none; }
  .franchise-intro { flex-direction: column; align-items: flex-start; gap: 24px; }
  .franchise-application { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
  .franchise-application-copy > p { max-width: 580px; }
}

@media (max-width: 680px) {
  .franchise h2 { font-size: clamp(32px, 8.3vw, 52px); }
  .franchise-steps { grid-template-columns: 1fr; gap: 24px; margin: 36px 0; }
  .franchise-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr); column-gap: 18px; }
  .franchise-number { grid-row: 1 / 3; font-size: 36px; margin: 0; }
  .franchise-steps h3 { font-size: 24px; }
  .franchise-steps p { grid-column: 2; }
  .franchise-application { padding: 26px 20px; gap: 28px; }
  .franchise-fields { grid-template-columns: 1fr; gap: 18px; }
  .franchise-application-copy h2 { font-size: 40px; }
  .franchise-form .button { padding: 16px 12px; font-size: 14px; }
  .franchise-cta { width: 100%; padding: 16px; gap: 18px; }
}

/* 14. 05 — Nous trouver
   ===================================================================== */

.visit {
  text-align: center;
  position: relative;
}

/* Mascotte : height auto pour garder ses proportions */
.visit > img {
  width: 180px;
  height: auto;
  object-fit: contain;
  margin: 0 auto 22px;
}

.visit > p:not(.eyebrow) {
  margin: 26px 0;
}

.visit-details {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin: 48px 0 36px;
  padding: 30px 0;
  border-top: 1px solid #39472b60;
  border-bottom: 1px solid #39472b60;
}

.visit-details > div {
  padding: 10px 20px;
  border-right: 1px solid #39472b60;
}

.visit-details > div:last-child {
  border: 0;
}

.visit-details span {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 2px;
}

.visit-details strong {
  font-size: 17px;
}

.visit-details p {
  font-size: 14px;
  margin-top: 6px;
}

.visit-menu-link {
  text-decoration: underline;
  text-underline-offset: 4px;
}

@media (max-width: 680px) {
  .visit-details {
    grid-template-columns: 1fr;
    margin: 30px 0;
  }

  .visit-details > div {
    border-right: 0;
    border-bottom: 1px solid #39472b40;
    padding: 20px 0;
  }

  .visit .button {
    gap: 10px;
    font-size: 13px;
    padding: 17px 16px;
  }
}


/* 15. Pied de page
   ===================================================================== */

footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  padding: 42px 5%;
  background: var(--green);
  color: var(--pink);
}

/* Logo recoloré en rose */
footer img {
  width: 175px;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(93%) sepia(10%) saturate(557%) hue-rotate(313deg);
}

footer > div {
  font-size: 12px;
  letter-spacing: 1px;
}

footer p {
  margin-top: 8px;
  letter-spacing: 0;
}

.legal {
  border: 0;
  border-bottom: 1px solid #ffedeb70;
  background: transparent;
  color: inherit;
  font-size: 12px;
  padding: 5px 0;
}

@media (max-width: 680px) {
  footer {
    flex-direction: column;
    text-align: center;
    padding: 35px 6%;
  }
}


/* 16. Dialogue « À propos »
   ===================================================================== */

dialog {
  max-width: 570px;
  padding: 45px;
  border: 2px solid var(--green);
  background: var(--pink);
  color: var(--green);
}

dialog::backdrop {
  background: #17200ecc;
}

dialog p:not(.eyebrow) {
  margin-top: 20px;
  font-size: 15px;
}

dialog h3 {
  margin-top: 36px;
  font-size: 26px;
}

dialog a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.dialog-close {
  position: absolute;
  right: 14px;
  top: 6px;
  font-size: 30px;
  border: 0;
  background: none;
  color: inherit;
}

@media (max-width: 680px) {
  dialog {
    width: 90%;
    padding: 38px 25px;
  }
}


/* 17. Apparitions au défilement
   ===================================================================== */

.js .reveal {
  opacity: 0;
  translate: 0 34px;
  transition:
    opacity .72s cubic-bezier(.22, 1, .36, 1),
    translate .72s cubic-bezier(.22, 1, .36, 1),
    scale .72s cubic-bezier(.22, 1, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, translate;
}

.js .reveal.reveal-left {
  translate: -38px 0;
}

.js .reveal.reveal-right {
  translate: 38px 0;
}

.js .reveal.reveal-scale {
  translate: 0 18px;
  scale: .97;
}

.js .reveal.is-visible {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* 18. Accessibilité
   ===================================================================== */

/* Visible uniquement pour les lecteurs d'écran */
.sr-only,
.skip:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

/* Lien « Aller au contenu », visible au clavier */
.skip:focus {
  position: fixed;
  top: 5px;
  left: 5px;
  z-index: 100;
  background: white;
  padding: 15px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .js .reveal {
    opacity: 1;
    translate: none;
    scale: 1;
  }
}


/* 19. Mobile : textes centrés
   ---------------------------------------------------------------------
   Sur téléphone, titres et textes sont centrés ; l'alignement à gauche
   reste pour ordinateur et tablette. Volontairement non centrés : les
   fiches de la carte (prix calé à droite) et le formulaire (plus lisible
   aligné à gauche). « Venir » et le pied de page sont déjà centrés.
   ===================================================================== */

@media (max-width: 680px) {
  .hero-copy,
  .hero-bottom,
  .intro-copy,
  .intro-footer,
  .section-heading,
  .menu-footnote,
  .spirit-copy,
  .franchise-heading,
  .franchise-intro,
  .franchise-steps li,
  .franchise-application-copy {
    text-align: center;
  }

  /* Paragraphes à largeur limitée : centrés dans la page */
  .hero-description,
  .intro-copy > p:not(.eyebrow),
  .section-heading > p,
  .franchise-application-copy > p {
    margin-inline: auto;
  }

  /* Blocs en flex : leurs enfants se centrent aussi */
  .hero-bottom,
  .intro-footer,
  .section-heading,
  .franchise-intro {
    flex-direction: column;
    align-items: center;
  }

  .hero-bottom {
    gap: 12px;
  }

  .franchise-heading {
    justify-content: center;
  }

  /* Étapes franchise : le numéro passe au-dessus du titre */
  .franchise-steps li {
    display: block;
  }

  .franchise-number {
    display: block;
    margin-bottom: 8px;
  }
}