/* ==========================================================
   VARIABLES : couleurs et polices du site
   ========================================================== */
/* :root = la racine de la page; les variables définies ici sont utilisables partout avec var(--nom)*/
:root{
  /* Couleurs : fond (vert très clair), encre (vert foncé, texte), prune (accent), doux (gris-vert), trait (bordures), blanc (cassé) */
  --fond:#E6EADF; --encre:#17302A; --prune:#6B2C4F; --doux:#52645C; --trait:#BFC8B7; --blanc:#F6F8F2;
  /* Police des titres : Young Serif, sinon Georgia, sinon Times, sinon n'importe quelle police */
  --titre:"Young Serif",Georgia,"Times New Roman",serif;
  /* Police du texte : Figtree, sinon la police système, sinon sans-serif*/
  --texte:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
/* Tous les éléments : la largeur inclut le padding et la bordure */
*{box-sizing:border-box}
/* Quand on clique sur un lien d'ancre, on garde 5rem d'espace en haut pour ne pas cacher le contenu sous l'en-tête fixe */
html{scroll-padding-top:5rem}
/* Page : pas de marge, fond et couleur de texte des variables, police 400 de taille 1.0625rem, interligne 1.65 */
body{margin:0;background:var(--fond);color:var(--encre);font:400 1.0625rem/1.65 var(--texte)}
/* Titres et logo : police des titres, poids normal, interligne serré, sans marge */
h1,h2,h3,.brand{font-family:var(--titre);font-weight:400;line-height:1.15;margin:0}
/* Titres h2 : taille 1.6rem et espace de 1rem en dessous */
h2{font-size:1.6rem;margin-bottom:1rem}
/* Titres h3 : taille 1.2rem */
h3{font-size:1.2rem}
/* Paragraphes : pas de marge en haut ni sur les côtés, 1rem en bas */
p{margin:0 0 1rem}
/* Liens : ils prennent la couleur du texte autour */
a{color:inherit}
/* Navigation au clavier : contour prune de 3px décalé de 3px autour de l'élément sélectionné */
:focus-visible{outline:3px solid var(--prune);outline-offset:3px}
/* .wrap : conteneur centré, largeur maximale 1100px, centré horizontalement */
.wrap{width:min(1100px,100% - 2.5rem);margin-inline:auto}

/* ==========================================================
   EN-TETE : reste collé en haut de la page
   ========================================================== */
/* Reste collé en haut au défilement, passe au-dessus du reste, fond + trait en bas */
.site-header{position:sticky;top:0;z-index:10;background:var(--fond);border-bottom:1px solid var(--trait)}
/* Barre : logo à gauche, menu à droite, centrés verticalement, espacés, avec 0.9rem en haut et en bas */
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.9rem}
/* Logo : grande taille et sans soulignement */
.brand{font-size:1.6rem;text-decoration:none}
/* Liens du menu : espacés à gauche, sans soulignement, avec une bordure basse transparente */
nav a{margin-left:1.5rem;text-decoration:none;padding-block:.3rem;border-bottom:2px solid transparent}
/* Au survol d'un lien : la bordure basse devient visible */
nav a:hover{border-color:var(--trait)}
/* Lien de la page actuelle (aria-current="page") : bordure prune et texte en gras */
nav a[aria-current="page"]{border-color:var(--prune);font-weight:600}
/* Bouton "Menu" (mobile) : caché sur grand écran, même police que la page, sans fond, bordure fine, coins arrondis */
.menu-btn{display:none;font:inherit;background:none;color:inherit;border:1px solid var(--encre);border-radius:6px;padding:.4rem .9rem;cursor:pointer}

/* Page d'accueil : 2 colonnes (la 1re 1.5 fois plus large que la 2e), espacées de 3rem, centrées verticalement, marges haut/bas */
.hero{display:grid;grid-template-columns:1.5fr 1fr;gap:3rem;align-items:center;padding-block:5rem 4rem}
/* Gros nom du restaurant : taille adaptative, lettres serrées, couleur prune */
.wordmark{font-size:clamp(4.5rem,13vw,9.5rem);letter-spacing:-.02em;color:var(--prune);margin-bottom:1.5rem}
/* Texte d'introduction : plus grand, largeur limitée à 34rem, couleur douce */
.lead{font-size:1.25rem;max-width:34rem;color:var(--doux)}
/* Bouton : fond foncé, texte clair, police en gras, sans soulignement, sans bordure */
.btn{display:inline-block;background:var(--encre);color:var(--fond);font:600 1rem var(--texte);text-decoration:none;border:0;border-radius:6px;padding:.85rem 1.6rem;cursor:pointer}
/* Bouton au survol : fond prune et texte blanc */
.btn:hover{background:var(--prune);color:var(--blanc)}
/* Encadré foncé : fond encre, texte couleur fond, coins arrondis, 2rem de marge intérieure */
.panel{background:var(--encre);color:var(--fond);border-radius:10px;padding:2rem}
/* Paragraphes de l'encadré : même couleur que l'encadré, légèrement transparents */
.panel p{color:inherit;opacity:.85}
/* Texte "big" de l'encadré : plus grand, police des titres, opacité pleine */
.panel .big{font:400 1.35rem/1.3 var(--titre);opacity:1;margin-bottom:.8rem}

/* Section index (liste de liens vers la carte) : espace en haut et en bas */
.index{padding-block:2rem 3rem}
/* Liste : sans puces, sans marges, avec un trait en haut */
.index ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--trait)}
/* Chaque lien : nom à gauche, texte à droite (flex), espacés, avec un trait en dessous */
.index a{display:flex;justify-content:space-between;gap:1.5rem;padding:1.4rem .2rem;border-bottom:1px solid var(--trait);text-decoration:none}
/* Nom de la catégorie : grand, en police des titres */
.index strong{font:400 1.8rem var(--titre)}
/* Texte descriptif : couleur douce, centré verticalement, aligné à droite */
.index span{color:var(--doux);align-self:center;text-align:right}
/* Au survol du lien, le nom devient prune */
.index a:hover strong{color:var(--prune)}
/* En-tête de page (titre + sous-titre des pages Entrées, Plats, etc.) : espaces haut/bas */
.page-head{padding-block:4rem 2rem}
/* Titre h1 : taille adaptative avec 1rem en dessous */
.page-head h1{font-size:clamp(2.6rem,7vw,4.5rem);margin-bottom:1rem}

/* ==========================================================
   LISTE DES PLATS : nom + description à gauche, prix à droite
   ========================================================== */
/* Liste : sans puces, 2.5rem de marge en bas, trait en haut */
.dishes{list-style:none;margin:0 0 2.5rem;padding:0;border-top:1px solid var(--trait)}
/* Chaque plat : texte à gauche, prix à droite (flex), alignés sur la ligne de base, avec un trait en dessous */
.dishes li{display:flex;justify-content:space-between;align-items:baseline;gap:2rem;padding:1.3rem 0;border-bottom:1px solid var(--trait)}
/* Description du plat : petite marge en haut, couleur douce */
.dishes p{margin:.2rem 0 0;color:var(--doux)}
/* Prix : gras, légèrement plus grand, sans retour à la ligne */
.price{font:600 1.15rem var(--texte);white-space:nowrap}
/* Images des plats */
.dishes img{
  /* L'image devient un bloc (supprime l'espace vide sous l'image) */
  display: block;
   /* Elle prend toute la largeur disponible*/
  width: 100%;
   /* mais jamais plus de 360px */
  max-width: 360%;
  /* La hauteur s'adapte automatiquement */
  height: auto;
   /* Format 4/3 imposé à l'image */
  aspect-ratio: 4/3;
  /* L'image remplit le cadre en étant recadrée, sans déformation */
  object-fit: cover;
  /* Coins arrondis de 10px */
  border-radius: 10px;
    /* Espace de 8rem au-dessus de l'image */
  margin-top: 8rem;
   /* Ombre légère sous l'image : décalage 0/4px, flou 14px, noir à 12% d'opacité */
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
    /* Animation douce de 0.3s sur le zoom */
  transition: transform .3s ease;
}
/* Au survol, l'image grossit de 3% */
.dishes img:hover{

  transform: scale(1.03);
}
/* Téléphone / petit écran : réglages pour les plats */
@media (max-width:820px){
   /* Texte et prix s'empilent verticalement et s'alignent à gauche */
  .dishes li{flex-direction: column; align-items: flex-start}
  .dishes img{
    /* L'image peut prendre toute la largeur */
    max-width: 100%;
      /* Format plus large (16/9) */
  aspect-ratio: 16/9;
  /* Hauteur limitée à 220px */
  max-height: 220px;
  }
}
/* Navigation entre pages de la carte : lien précédent à gauche, lien suivant à droite, espaces haut/bas */
.pager{display:flex;justify-content:space-between;gap:1rem;padding-block:2rem 5rem}
/* Liens de navigation en gras */
.pager a{font-weight:600}

/* ==========================================================
   PAGE CONTACT
   ========================================================== */

   /* Mise en page en 2 colonnes (infos 1fr, formulaire 1.3fr), espace de 4rem, marge en bas */
.contact{display:grid;grid-template-columns:1fr 1.3fr;gap:4rem;padding-bottom:5rem}
/* Titres h2 des infos : taille 1.3rem, espace au-dessus */
.infos h2{font-size:1.3rem;margin-top:1.8rem}
/* Le premier h2 n'a pas d'espace au-dessus */
.infos h2:first-child{margin-top:0}
/* Formulaire : fond blanc, bordure fine, coins arrondis, marge intérieure de 2rem */
form{background:var(--blanc);border:1px solid var(--trait);border-radius:10px;padding:2rem}
/* Étiquettes des champs : sur leur propre ligne, en gras, espace au-dessus et en dessous */
label{display:block;font-weight:600;margin:1rem 0 .3rem}
/* Champs de saisie : pleine largeur, même police et couleur que la page, fond clair, bordure douce, coins arrondis */
input,textarea{width:100%;font:inherit;color:inherit;background:var(--fond);border:1px solid var(--doux);border-radius:6px;padding:.7rem .8rem}
/* Deux champs côte à côte (2 colonnes égales) avec 1rem d'espace */
.row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* Bouton dans le formulaire : espace de 1.5rem au-dessus */
form .btn{margin-top:1.5rem}
/* Message de statut (envoi du formulaire) : espace au-dessus, en gras */
#statut{margin:1rem 0 0;font-weight:600}
/* Message d'erreur : rouge */
#statut.erreur{color:#B3261E}
/* Message d'erreur en mode sombre : rouge plus clair pour rester lisible */
@media (prefers-color-scheme:dark){#statut.erreur{color:#F2A29C}}

/* PIED DE PAGE : adresse, horaires, contact */
/* Fond foncé, texte clair, marges intérieures */
.site-footer{background:var(--encre);color:var(--fond);padding-block:3rem 1.5rem}
/* Contenu du pied de page : 3 colonnes égales, espacées de 2rem */
.foot{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
/* Paragraphes du pied de page : petite marge en bas */
.site-footer p{margin-bottom:.8rem}
/* Mentions légales : un peu transparentes, plus petites, espace au-dessus */
.legal{opacity:.7;font-size:.9rem;margin-top:2rem}

/* RESPNSIVE : ajustement pour téléphone */
/* Tout ce qui suit ne s'applique que si l'écran fait 820px de large ou moins */
@media (max-width:820px){
    /* Le bouton "Menu" devient visible */
  .menu-btn{display:block}
    /* Le menu est caché et placé juste sous l'en-tête, sur toute la largeur, avec fond et trait en bas */
  nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--fond);border-bottom:1px solid var(--trait);padding:.5rem 1.25rem 1rem}
   /* Quand la classe "ouvert" est ajoutée (par le JavaScript), le menu s'affiche */
  nav.ouvert{display:block}
   /* Liens du menu mobile : l'un sous l'autre, sans marge à gauche, avec de l'espace en haut et en bas */
  nav a{display:block;margin:0;padding:.7rem 0}
    /* Accueil, contact et pied de page : une seule colonne au lieu de plusieurs */
  .hero,.contact,.foot{grid-template-columns:1fr;gap:2rem}
   /* Accueil : moins d'espace en haut et en bas */
  .hero{padding-block:3rem 2rem}
    /* Liens de l'index : nom et texte s'empilent, petit espace entre les deux */
  .index a{flex-direction:column;gap:.3rem}
   /* Texte de l'index aligné à gauche */
  .index span{text-align:left}
  /* Section "à propos" : marge gauche automatique */
  .about{margin-left:auto}
   /* Liste des plats : espace réduit entre les éléments */
  .dishes li{gap:1rem}
}