Rivo, vannier à Antalaha : page de présentation

css/style.css · 6.5 Ko

/* =====================================================================
   css/style.css : mise en forme de la page de l'artisan vannier
   =====================================================================
   Rôle : ce fichier décrit l'APPARENCE (couleurs, espaces, tailles).
   Le fichier ../index.html décrit la STRUCTURE (titres, paragraphes...).
   Séparer les deux permet de changer le look sans toucher au contenu.

   Méthode « mobile d'abord » : les règles de base visent le petit écran
   (360 px). Seule la dernière partie, avec @media, adapte la page aux
   écrans plus larges. */


/* ---------------------------------------------------------------------
   1. Réglages de base
   --------------------------------------------------------------------- */

/* box-sizing: border-box : la largeur d'un élément INCLUT ses marges
   intérieures (padding) et sa bordure. Sans cela, un bloc de width:100%
   avec du padding dépasserait de l'écran (scroll horizontal !). */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;                       /* on retire la marge par défaut du navigateur */
  font-family: system-ui, "Segoe UI", Arial, sans-serif; /* polices déjà installées : rien à télécharger */
  font-size: 1.125rem;             /* 1rem = taille de police de base (16 px) : ici ~18 px, confortable */
  line-height: 1.6;                /* interligne : texte aéré = plus lisible */
  color: #2b2118;                  /* brun très foncé : contraste élevé sur fond clair */
  background: #fbf6ec;             /* crème, évoque la fibre naturelle */
}

/* Les images ne dépassent jamais leur conteneur et gardent leurs
   proportions (height:auto s'adapte à la largeur). */
img {
  max-width: 100%;
  height: auto;
  display: block;                  /* supprime le petit espace sous les images « en ligne » */
}

/* Focus visible : l'encadré qui montre où l'on est quand on navigue au
   clavier (touche Tab). Ne le supprimez jamais sans le remplacer ! */
a:focus-visible {
  outline: 3px solid #b5541c;
  outline-offset: 3px;
}

a {
  color: #8a3b0d;                  /* orange brûlé : contraste ~7:1 sur le fond crème */
}


/* ---------------------------------------------------------------------
   2. Lien d'évitement (accessibilité)
   --------------------------------------------------------------------- */

/* Caché hors de l'écran, il apparaît quand il reçoit le focus (Tab). */
.lien-evitement {
  position: absolute;
  left: 0.5rem;
  top: -4rem;                      /* au-dessus de l'écran : invisible */
  background: #2b2118;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
}
.lien-evitement:focus {
  top: 0;                          /* il descend dans l'écran */
}


/* ---------------------------------------------------------------------
   3. En-tête
   --------------------------------------------------------------------- */

.entete {
  background: #5b3a1e;             /* brun osier */
  color: #fff7e6;
  padding: 2rem 1rem;              /* 1rem de gauche/droite : marge de sécurité sur mobile */
  text-align: center;
}

.entete h1 {
  margin: 0 0 0.5rem;              /* haut 0, côtés 0, bas 0.5rem */
  font-size: 2rem;
  line-height: 1.2;
}

.accroche {
  margin: 0;
}


/* ---------------------------------------------------------------------
   4. Contenu principal et sections
   --------------------------------------------------------------------- */

main {
  /* max-width : sur grand écran, le texte reste dans une colonne lisible
     (≈ 45 rem ≈ 720 px). margin auto à gauche/droite = centré. */
  max-width: 45rem;
  margin: 0 auto;
  padding: 0 1rem;
}

.section {
  padding: 2rem 0;
  border-bottom: 2px dashed #d9c7a3;  /* séparation discrète entre sections */
}
.section:last-child {
  border-bottom: none;             /* pas de trait après la dernière */
}

h2 {
  font-size: 1.5rem;
  color: #5b3a1e;
  margin: 0 0 1rem;
}

h3 {
  margin: 0 0 0.25rem;
  font-size: 1.2rem;
}

/* Image + légende */
.illustration {
  margin: 0 0 1.5rem;              /* <figure> a des marges par défaut : on les remplace */
}
.illustration img {
  border-radius: 0.75rem;          /* coins arrondis */
}
.illustration figcaption {
  font-size: 0.9rem;
  color: #5f5446;                  /* gris-brun, contraste correct (>4,5:1) */
  margin-top: 0.4rem;
}


/* ---------------------------------------------------------------------
   5. Produits
   --------------------------------------------------------------------- */

.produits {
  list-style: none;                /* on enlève les puces */
  margin: 0;
  padding: 0;
  display: grid;                   /* disposition en grille */
  gap: 1rem;                       /* espace entre les fiches */
  /* Mobile : une seule colonne (par défaut). Voir @media plus bas. */
}

.fiche {
  background: #fff;
  border: 1px solid #e3d3b1;
  border-left: 6px solid #b5541c;  /* liseré coloré à gauche */
  border-radius: 0.5rem;
  padding: 1rem;
}
.fiche p {
  margin: 0.25rem 0;
}

.prix {
  color: #8a3b0d;
  font-size: 1.2rem;
}

.note {
  font-size: 0.9rem;
  color: #5f5446;
}


/* ---------------------------------------------------------------------
   6. Contact
   --------------------------------------------------------------------- */

/* <address> est en italique par défaut : on le remet en normal. */
.contact {
  font-style: normal;
}
.contact p {
  display: flex;                   /* icône et texte alignés sur une ligne */
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.icone {
  flex-shrink: 0;                  /* l'icône ne se laisse pas écraser par le texte */
  width: 1.5rem;
  height: 1.5rem;
  color: #b5541c;                  /* currentColor du SVG = cette couleur */
}


/* ---------------------------------------------------------------------
   7. Pied de page
   --------------------------------------------------------------------- */

.pied {
  background: #2b2118;
  color: #f1e6d0;
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.9rem;
}
.pied p {
  margin: 0.25rem 0;
}


/* ---------------------------------------------------------------------
   8. Écrans plus larges (tablette, ordinateur)
   --------------------------------------------------------------------- */

/* Cette règle ne s'applique que si l'écran fait au moins 600 px de large. */
@media (min-width: 600px) {
  .entete h1 {
    font-size: 2.75rem;
  }
  /* Deux colonnes de largeur égale (1fr = une fraction de l'espace). */
  .produits {
    grid-template-columns: 1fr 1fr;
  }
}