Le Vanillier : site d'un restaurant

css/style.css · 12.0 Ko

/* =====================================================================
   css/style.css : mise en forme du site « Le Vanillier »
   =====================================================================
   Rôle : toutes les règles d'apparence. Les couleurs et tailles viennent
   des variables de variables.css (chargé avant ce fichier).
   Ordre du fichier : base > en-tête > sections > menu > horaires >
   galerie > formulaire > FAQ > pied de page > grands écrans.
   Approche « mobile d'abord » : on écrit pour 360 px, puis on enrichit
   avec @media (min-width: ...) tout en bas. */


/* ---------------------------------------------------------------------
   1. Base
   --------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;   /* width inclut padding et bordure : plus prévisible */
}

html {
  scroll-behavior: smooth;  /* les liens d'ancre (#menu...) défilent en douceur */
  scroll-padding-top: 4rem; /* garde de la place pour la barre de navigation collante */
}

body {
  margin: 0;
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--couleur-texte);
  background: var(--couleur-fond);
}

img {
  max-width: 100%;          /* une image ne déborde jamais de son conteneur */
  height: auto;             /* ... et garde ses proportions */
  display: block;
}

h1, h2, h3 {
  font-family: var(--police-titre);
  color: var(--couleur-principale);
  line-height: 1.2;
}

a { color: var(--couleur-principale); }

/* Focus visible pour la navigation au clavier : sur tous les éléments
   interactifs (liens, boutons, champs, résumés de FAQ). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--couleur-accent);
  outline-offset: 3px;
}

/* Classe utilitaire : texte visible uniquement pour les lecteurs d'écran
   (par exemple l'étiquette d'un champ dont le sens est évident à l'œil). */
.cache-visuel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Le lien d'évitement (classe .cache-visuel) redevient visible quand il
   reçoit le focus clavier : on le fixe en haut à gauche de l'écran. */
a.cache-visuel:focus {
  position: fixed;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 20;
  width: auto;
  height: auto;
  clip-path: none;
  padding: 0.6rem 1rem;
  background: #fff;
  color: #000;
  border-radius: 0.5rem;
}

/* Conteneur : centre le contenu et limite sa largeur. */
.conteneur {
  width: 100%;
  max-width: var(--largeur-max);
  margin: 0 auto;
  padding: 0 var(--espace-2);
}


/* ---------------------------------------------------------------------
   2. En-tête et navigation
   --------------------------------------------------------------------- */

.entete {
  position: sticky;         /* reste collé en haut pendant le défilement */
  top: 0;
  z-index: 10;              /* passe au-dessus du contenu qui défile dessous */
  background: var(--couleur-principale);
  color: #fff;
}

/* Flexbox : le nom et les liens sur la même ligne, qui passe à la ligne
   si l'écran est trop étroit (flex-wrap). */
.entete .conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--espace-1) var(--espace-2);
  padding-top: var(--espace-1);
  padding-bottom: var(--espace-1);
}

.logo {
  font-family: var(--police-titre);
  font-size: 1.4rem;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
}

.navigation ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.navigation a {
  color: #fff;
  display: inline-block;
  padding: 0.4rem 0.2rem;   /* zone cliquable plus grande au doigt */
}

/* Sur le fond vert, le focus doré reste bien visible. */


/* ---------------------------------------------------------------------
   3. Bandeau d'accueil (« hero »)
   --------------------------------------------------------------------- */

.accueil {
  position: relative;
  color: #fff;
  /* Image locale en fond + dégradé sombre par-dessus pour que le texte
     blanc reste lisible : plusieurs fonds se séparent par des virgules,
     le premier est au-dessus. */
  background:
    linear-gradient(rgba(10, 30, 20, 0.6), rgba(10, 30, 20, 0.75)),
    url("../medias/antalaha-baie-soir-paysage.svg") center / cover no-repeat;
  padding: var(--espace-4) 0;
  text-align: center;
}
.accueil h1 {
  color: #fff;
  font-size: 2.2rem;
  margin: 0 0 var(--espace-1);
}
.accueil p {
  margin: 0 auto var(--espace-3);
  max-width: 34rem;
}

/* Bouton (lien stylé comme un bouton) */
.bouton {
  display: inline-block;
  background: var(--couleur-accent);
  color: #1d1405;           /* texte sombre sur or : contraste suffisant */
  font-weight: bold;
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border: 0;
  border-radius: 999px;     /* valeur énorme = extrémités totalement arrondies */
  cursor: pointer;
  font-size: 1rem;
}
.bouton:hover {
  background: #e0a22c;
}


/* ---------------------------------------------------------------------
   4. Sections génériques
   --------------------------------------------------------------------- */

.section {
  padding: var(--espace-4) 0;
}
/* Une section sur deux a un fond différent pour rythmer la page. */
.section--alt {
  background: #f6ecd4;
}
.section h2 {
  font-size: 1.8rem;
  margin: 0 0 var(--espace-3);
}
.intro {
  color: var(--couleur-texte-doux);
  margin-top: calc(-1 * var(--espace-2)); /* rapproche l'intro du titre */
}


/* ---------------------------------------------------------------------
   5. Menu par catégories
   --------------------------------------------------------------------- */

/* Grille : 1 colonne sur mobile (voir les @media pour la suite). */
.menu-grille {
  display: grid;
  gap: var(--espace-3);
}

.categorie {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: var(--espace-2) var(--espace-3);
}
.categorie h3 {
  margin-top: 0;
  border-bottom: 2px solid var(--couleur-accent);
  padding-bottom: 0.25rem;
}

/* Liste de plats : un <dl> (liste de définitions) = nom + description. */
.plats {
  margin: 0;
}
.plat {
  display: grid;
  /* Deux colonnes : le texte prend la place restante (1fr),
     le prix s'ajuste à son contenu (auto). */
  grid-template-columns: 1fr auto;
  gap: 0 var(--espace-2);
  padding: 0.6rem 0;
  border-bottom: 1px dotted var(--couleur-bordure);
}
.plat:last-child { border-bottom: 0; }
.plat dt { font-weight: bold; }
.plat dd { margin: 0; }
.plat .description {
  grid-column: 1;           /* la description reste sous le nom, côté gauche */
  color: var(--couleur-texte-doux);
  font-size: 0.95rem;
}
.plat .prix {
  grid-column: 2;
  grid-row: 1 / span 2;     /* le prix occupe les deux lignes, aligné à droite */
  font-weight: bold;
  color: var(--couleur-principale);
  white-space: nowrap;      /* le prix ne se coupe jamais en deux lignes */
}


/* ---------------------------------------------------------------------
   6. Horaires (tableau)
   --------------------------------------------------------------------- */

/* Un tableau large peut dépasser l'écran : on l'enveloppe dans un bloc
   qui défile SEUL horizontalement si nécessaire, sans faire défiler la page. */
.tableau-conteneur {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;  /* fusionne les bordures voisines */
  background: var(--couleur-surface);
}
caption {
  text-align: left;
  font-weight: bold;
  padding: 0 0 var(--espace-1);
}
th, td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid var(--couleur-bordure);
}
thead th {
  background: var(--couleur-principale);
  color: #fff;
}
/* Ligne « fermé » mise en retrait. */
.ferme td {
  color: var(--couleur-texte-doux);
  font-style: italic;
}


/* ---------------------------------------------------------------------
   7. Galerie
   --------------------------------------------------------------------- */

.galerie {
  display: grid;
  gap: var(--espace-2);
  /* repeat(auto-fit, minmax(...)) : « autant de colonnes que possible,
     chacune d'au moins 16rem ». Pas besoin de @media : la grille
     s'adapte seule à la largeur. */
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
.galerie figure {
  margin: 0;
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  overflow: hidden;         /* l'image suit les coins arrondis */
}
.galerie img {
  width: 100%;
  aspect-ratio: 16 / 9;     /* réserve un rectangle 16:9 */
  object-fit: cover;        /* l'image remplit le cadre sans se déformer */
}
.galerie figcaption {
  padding: 0.6rem 0.9rem;
  font-size: 0.95rem;
  color: var(--couleur-texte-doux);
}


/* ---------------------------------------------------------------------
   8. Formulaire de réservation
   --------------------------------------------------------------------- */

.formulaire {
  display: grid;
  gap: var(--espace-2);
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  padding: var(--espace-3);
  max-width: 36rem;
}
.champ {
  display: grid;            /* étiquette au-dessus du champ */
  gap: 0.3rem;
}
.champ label {
  font-weight: bold;
}
input,
select,
textarea {
  font: inherit;            /* les champs reprennent la police de la page */
  padding: 0.6rem 0.75rem;
  border: 2px solid #8b7d66;  /* bordure assez foncée pour être bien visible */
  border-radius: 0.5rem;
  background: #fff;
  color: var(--couleur-texte);
  width: 100%;
}
/* Deux champs côte à côte (date + heure) : Flexbox. */
.ligne {
  display: flex;
  flex-wrap: wrap;
  gap: var(--espace-2);
}
.ligne .champ {
  flex: 1 1 10rem;          /* grandit, rétrécit, base de 10rem avant retour à la ligne */
}
.aide {
  font-size: 0.9rem;
  color: var(--couleur-texte-doux);
  margin: 0;
}
/* Bouton « Réserver » : même style que .bouton mais vert. */
.formulaire .bouton {
  background: var(--couleur-principale);
  color: #fff;
}
.formulaire .bouton:hover {
  background: var(--couleur-principale-fonce);
}
/* Encadré d'information (ici : « ce formulaire est une démonstration »,
   voir index.html). */
.message {
  margin: 0;
  padding: 0.75rem 1rem;
  background: #e3f3e8;
  border-left: 6px solid var(--couleur-principale);
  border-radius: 0.5rem;
}


/* ---------------------------------------------------------------------
   9. FAQ (details / summary)
   --------------------------------------------------------------------- */

.faq details {
  background: var(--couleur-surface);
  border: 1px solid var(--couleur-bordure);
  border-radius: var(--rayon);
  margin-bottom: var(--espace-1);
  padding: 0 var(--espace-2);
}
.faq summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.9rem 0;
}
.faq details[open] summary {   /* quand la question est dépliée */
  color: var(--couleur-principale);
}
.faq details p {
  margin: 0 0 var(--espace-2);
}


/* ---------------------------------------------------------------------
   10. Pied de page
   --------------------------------------------------------------------- */

.pied {
  background: #153f2a;
  color: #eaf3ec;
  padding: var(--espace-3) 0;
  text-align: center;
  font-size: 0.95rem;
}
.pied p { margin: 0.25rem 0; }
.pied a { color: #fff; }


/* ---------------------------------------------------------------------
   11. Écrans plus larges
   --------------------------------------------------------------------- */

@media (min-width: 640px) {
  .accueil h1 { font-size: 3rem; }
  /* Menu : deux colonnes à partir de 640 px. */
  .menu-grille { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 960px) {
  .accueil { padding: 6rem 0; }
  /* Le dessert, dernière carte, s'étale sur toute la largeur. */
  .menu-grille .categorie:last-child { grid-column: 1 / -1; }
}

/* Respect des personnes sensibles aux animations : on coupe le défilement doux. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}