/* 22/10 : ce que la page d'accueil ajoute à refonte.css. Mêmes jetons, mêmes
   polices ; rien ici ne redéfinit une règle de refonte.css sauf la colonne
   de la démo, signalée plus bas. */

/* Icônes du jeu Doucette (assets/doucette-icons-v2.svg), dessinées au trait. */
.etape-icone svg,.engagement-icone svg,.scenario-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scenario-icon svg{width:20px;height:20px}

.site-header nav a{white-space:nowrap}
.availability strong{color:var(--forest)}

/* La démo : la colonne de gauche restait centrée contre un téléphone de
   900 px et laissait un vide de 250 px sous le titre. Elle monte en haut et
   suit le défilement. */
@media(min-width:851px){.app-showcase{align-items:start}.app-navigation{position:sticky;top:40px}}

/* ── Comment ça marche ── */
.etapes{padding-block:120px 110px}
.etapes .section-intro h2>span{color:var(--coral)}
.etapes-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:none}
.etapes-liste li{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:28px 26px 30px;display:flex;flex-direction:column;gap:12px;transition:translate .25s,box-shadow .25s}
.etapes-liste li:hover{translate:0 -4px;box-shadow:0 18px 40px #2134261a}
.etape-icone{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;background:var(--lime);color:var(--forest);margin-bottom:8px}
.etapes-liste li:nth-child(2) .etape-icone{background:#f8ddd4;color:#a83c33}
.etapes-liste li:nth-child(3) .etape-icone{background:#e2ecd9}
.etapes-liste li:nth-child(4) .etape-icone{background:#f1e4cf;color:#7a4b1f}
.etape-rang{position:absolute;top:26px;right:26px;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.08em}
.etapes-liste h3{font-size:24px;color:var(--forest)}
.etapes-liste p{font-size:15px;line-height:1.6;color:#3d4b39}

/* ── Engagements ── */
.engagements{background:var(--forest);color:var(--paper);padding-block:110px;border-radius:40px}
.engagements .section-intro h2>span{color:var(--lime)}
.engagements .section-intro>p{color:#e4ead6}
.engagements-grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:#4c6b4f;border:1px solid #4c6b4f;border-radius:var(--radius);overflow:hidden}
.engagements-grille li{background:var(--forest);padding:36px 36px 38px;display:grid;grid-template-columns:auto 1fr;column-gap:20px;row-gap:8px;align-items:start}
.engagement-icone{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#2f5a3b;color:var(--lime)}
.engagements-grille h3{font-size:24px;color:var(--paper)}
.engagements-grille h3:before{content:'Jamais : ';color:var(--lime);font-weight:800}
.engagements-grille p{font-size:15px;line-height:1.65;color:#dfe7d2;max-width:460px}
.engagements-note{margin-top:28px;font-size:13px;color:#cdd8c1}
.engagements :focus-visible{outline-color:var(--lime)}

/* ── Les classiques qui donnent faim ──
   Les images des fiches de l'app : assiette vue du dessus, fond transparent.
   Posées telles quelles sur le fond de la section, sans cadre ni recadrage. */
.cuisine-intro h2>span{color:var(--coral)}
.plats-grille{margin-top:56px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px 22px}
.plat{display:flex;flex-direction:column;gap:16px}
.plat-assiette{aspect-ratio:1;display:grid;place-items:center}
.plat-assiette img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 18px 22px #4a3a2030);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.plat:hover .plat-assiette img{transform:rotate(-8deg) scale(1.05)}
.plat figcaption span{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5b6d50;margin-bottom:4px}
.plat h3{font-size:24px;color:var(--forest)}
.plats-note{margin-top:22px;font-size:12px;color:#5b6d50}
@media(max-width:850px){.plat figcaption span{font-size:10.5px;letter-spacing:.03em;white-space:nowrap}.plats-grille{grid-template-columns:repeat(2,1fr);gap:22px 14px}.plat h3{font-size:19px}}
@media(max-width:359px){.plats-grille{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.plat-assiette img{transition:none}.plat:hover .plat-assiette img{transform:none}}

/* ── Petits écrans ── */
@media(max-width:1150px){
  .site-header nav{gap:18px}
  .site-header nav a:first-child{display:none}
  .etapes-liste{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:850px){
  .etapes{padding-block:80px 70px}
  .engagements{padding-block:80px;border-radius:32px}
  .engagements-grille{grid-template-columns:1fr}
}
@media(max-width:620px){
  .site-header nav{display:none}
  .etapes-liste{grid-template-columns:1fr;gap:12px}
  .etapes-liste li{padding:22px 22px 24px;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px}
  .etape-icone{grid-row:span 2;margin:0;width:46px;height:46px}
  .etape-rang{display:none}
  .etapes-liste h3{font-size:20px;align-self:end}
  .etapes-liste p{grid-column:2;font-size:14px}
  .engagements-grille li{padding:26px 22px;column-gap:14px}
  .engagement-icone{width:42px;height:42px}
  .engagements-grille h3{font-size:20px}
  .engagements-grille p{grid-column:1/-1;font-size:14px}
}
@media(prefers-reduced-motion:reduce){.etapes-liste li{transition:none}.etapes-liste li:hover{translate:none}}
@media(max-width:620px){.site-header .button-small{display:inline-flex}}