/*
  style.css = la feuille de style. Elle dit AU NAVIGATEUR à quoi
  doit ressembler chaque élément HTML.

  Principe : on "sélectionne" des éléments (par leur balise, ou par
  leur classe qui commence par un point ".") puis on liste des
  propriétés entre accolades { }.
*/

/* ===== 1. Réglages globaux ===== */

/* Les "variables CSS" : on définit nos couleurs une fois, on les
   réutilise partout avec var(...). Changer une valeur ici met à jour
   tout le site. */
:root {
  --sable: #e9e0d2;
  --sable-fonce: #d8cdb8;
  --texte: #2b2b28;
  --accent: #b0654f;
  --marine: #1b2a4a;       /* le bleu de la marque, pour les titres */
  --blanc-casse: #f4f1ea;  /* fond crème, comme sur la planche produit */
}

/* Le sélecteur "*" vise TOUS les éléments. On enlève les marges par
   défaut du navigateur pour partir d'une base propre. */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* la largeur inclut les bordures/marges internes */
}

/* Un clic sur <a href="#collection"> glisse jusqu'à la section au lieu
   de "sauter" brutalement. */
html {
  scroll-behavior: smooth;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--texte);
  background: var(--blanc-casse);
  line-height: 1.6;
}

a {
  color: inherit;          /* les liens prennent la couleur du texte */
  text-decoration: none;   /* pas de soulignement */
}

/* ===== 2. En-tête ===== */

.site-header {
  display: flex;                   /* aligne les enfants sur une ligne */
  justify-content: space-between;  /* logo à gauche, menu à droite */
  align-items: center;
  padding: 20px 40px;
  border-bottom: 1px solid var(--sable-fonce);
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  height: 46px;   /* le nom de la marque doit se voir sans chercher */
  width: auto;
  display: block;
}

.site-header nav a {
  margin-left: 24px;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--marine);
}

.site-header nav a:hover {
  color: var(--accent);
}

/* ===== 3. Bannière d'accueil ===== */

.hero {
  text-align: center;
  padding: 90px 20px;
  background: var(--marine);
  color: var(--blanc-casse);
}

.hero h1 {
  font-size: 40px;
  font-weight: normal;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

/* ===== 3bis. Hero photo (page d'accueil) =====
   Une photo plein cadre avec le texte posé dessus. Deux ingrédients :
   - position: relative sur le conteneur, absolute sur ce qui doit se
     superposer (ici .hero-shoot-texte) ;
   - un dégradé sombre en bas de la photo pour que le texte blanc reste
     lisible quelle que soit la photo utilisée.
*/

.hero-shoot {
  position: relative;
  height: 78vh;              /* 78% de la hauteur de l'écran */
  min-height: 460px;
  max-height: 760px;
  overflow: hidden;
}

.hero-shoot img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* remplit le cadre, rogne plutôt que déformer */
  object-position: center 30%;
  display: block;
}

.hero-shoot::after {
  /* Un calque sombre en dégradé, posé sur la photo, sous le texte. */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%);
}

.hero-shoot-texte {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  z-index: 1;                /* au-dessus du dégradé */
  text-align: center;
  color: white;
  padding: 0 20px;
}

.hero-shoot-texte h1 {
  font-size: 46px;
  font-weight: normal;
  letter-spacing: 2px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.35);
}

.hero-shoot-texte p {
  margin-top: 10px;
  font-size: 16px;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}

.btn-hero {
  display: inline-block;
  margin-top: 28px;
  padding: 14px 32px;
  border: 1px solid white;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-hero:hover {
  background: white;
  color: var(--marine);
}

/* ===== 3ter. Rangée éditoriale =====
   3 photos cliquables, une par imprimé. Le nom apparaît en bas, sur un
   petit dégradé, et l'image zoome légèrement au survol (transform +
   overflow: hidden sur le parent, pour que le zoom ne dépasse pas).
*/

.editorial {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.editorial-vignette {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  display: block;
}

.editorial-vignette img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.editorial-vignette:hover img {
  transform: scale(1.05);
}

.editorial-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.45) 100%);
}

.editorial-vignette span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20px;
  z-index: 1;
  text-align: center;
  color: white;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ===== 4. Grille de produits ===== */

.section-collection {
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 40px 0;
}

.section-collection h2 {
  text-align: center;
  font-size: 26px;
  font-weight: normal;
  letter-spacing: 2px;
  color: var(--marine);
}

.grille-produits {
  display: grid;
  /* autant de colonnes que possible, chacune min. 240px de large */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 32px;
  padding: 40px 0 48px;
}

/* Les cartes sont centrées, façon planche produit. */
.carte-produit {
  text-align: center;
  transition: transform 0.2s ease;
}

/* Léger soulèvement de la carte au survol. */
.carte-produit:hover {
  transform: translateY(-4px);
}

.carte-produit h2 {
  font-size: 19px;
  font-weight: normal;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--marine);
  margin-top: 6px;
}

.lieu {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #8a8577;
  margin-top: 2px;
}

.prix {
  color: var(--accent);
  margin-top: 6px;
}

.carte-produit:hover h2 {
  color: var(--accent);
}

/* ===== 5. Le maillot (carré) + les pastilles (ronds) =====

   Le CARRÉ montre le produit : le maillot (img/produit-<id>.jpg).
   object-fit: contain garde le maillot entier ; mix-blend-mode: multiply
   fond le fond clair de la photo dans le crème de la page.

   Sous le carré, deux RONDS de détail :
     - .pastille--tissu : le tissu en gros plan, qui remplit le rond (cover)
     - .pastille--motif : l'illustration du motif (PNG transparent) posée
       sur un rond de couleur (produit.fond, en style inline)
*/

.photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: contain;
  mix-blend-mode: multiply;
  border-radius: 3px;
}

/* Fiche produit : les deux vues (face + dos) côte à côte. */
.fiche-vues {
  display: flex;
  gap: 10px;
}
.fiche-vues .photo {
  flex: 1;
  min-width: 0;
}

/* La rangée des deux ronds, centrée sous le carré. */
.pastilles {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin: 16px 0 4px;
}

/* Le cadre rond commun aux deux pastilles. */
.pastille {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.pastille img {
  display: block;
}

/* Tissu : l'image remplit tout le rond. */
.pastille--tissu img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Motif : l'illustration tient dans le rond, avec une marge. */
.pastille--motif {
  padding: 12px;
}
.pastille--motif img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Sur la fiche produit, les vues + les ronds forment une colonne. */
.fiche-visuel {
  flex: none;
  width: 440px;
  max-width: 100%;
}

/* ===== 6. Fiche produit ===== */

.fil-ariane {
  max-width: 1000px;
  margin: 24px auto 0;
  padding: 0 40px;
  font-size: 13px;
  color: #8a8577;
}

.fiche-produit {
  display: flex;
  gap: 56px;
  max-width: 1000px;
  margin: 24px auto 80px;
  padding: 24px 40px;
}

.fiche-infos {
  flex: 1; /* occupe l'espace restant à côté de la photo */
}

.fiche-infos h1 {
  font-size: 30px;
  font-weight: normal;
}

.prix--grand {
  font-size: 22px;
  margin: 8px 0 24px;
}

.description {
  margin-bottom: 28px;
}

.fiche-infos label {
  display: block;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}

.fiche-infos select {
  padding: 10px;
  font-size: 15px;
  border: 1px solid var(--sable-fonce);
  background: white;
  margin-bottom: 20px;
}

.btn-ajouter {
  display: block;
  width: 100%;
  padding: 16px;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  background: var(--texte);
  border: none;
  cursor: pointer;
}

.btn-ajouter:hover {
  background: var(--accent);
}

.details {
  list-style: none;
  margin-top: 24px;
  font-size: 14px;
  color: #6b6659;
}

.details li {
  padding: 4px 0;
  border-bottom: 1px solid #ece5d8;
}

/* ===== 7. Pied de page ===== */

.site-footer {
  text-align: center;
  padding: 40px 20px;
  font-size: 13px;
  color: #8a8577;
  border-top: 1px solid var(--sable-fonce);
}

/* ===== 8. Lien "Panier" dans l'en-tête ===== */

.lien-panier {
  font-variant-numeric: tabular-nums; /* le chiffre ne fait pas sauter le texte */
}

/* ===== 9. Confirmation "Ajouté au panier" (fiche produit) ===== */

.confirmation {
  margin-top: 12px;
  color: #4a7c59;
  font-size: 14px;
}

/* ===== 10. Page panier ===== */

.titre-panier {
  max-width: 800px;
  margin: 40px auto 24px;
  padding: 0 40px;
  font-size: 28px;
  font-weight: normal;
}

.contenu-panier {
  max-width: 800px;
  margin: 0 auto 80px;
  padding: 0 40px;
}

/* Une ligne = photo miniature | infos | quantité | prix.
   grid-template-columns décrit ces 4 colonnes. */
.ligne-panier {
  display: grid;
  grid-template-columns: 70px 1fr auto auto;
  gap: 20px;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #ece5d8;
}

/* Vignette du panier : le maillot, petit. */
.photo--mini {
  width: 70px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}

.ligne-infos h3 {
  font-size: 16px;
  font-weight: normal;
}

.ligne-taille {
  font-size: 13px;
  color: #8a8577;
  margin: 2px 0 6px;
}

.lien-retirer {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}

.ligne-quantite {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ligne-quantite button {
  width: 28px;
  height: 28px;
  border: 1px solid var(--sable-fonce);
  background: white;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.ligne-quantite button:hover {
  border-color: var(--texte);
}

.ligne-prix {
  color: var(--accent);
  min-width: 60px;
  text-align: right;
}

.panier-total {
  display: flex;
  justify-content: space-between;
  font-size: 20px;
  padding: 24px 0;
}

.btn-payer {
  width: 100%;
  padding: 16px;
  font-size: 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: white;
  background: var(--texte);
  border: none;
  cursor: pointer;
}

.btn-payer:hover {
  background: var(--accent);
}

.note-paiement {
  margin-top: 12px;
  font-size: 13px;
  color: #8a8577;
  text-align: center;
}

.btn-continuer {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  border: 1px solid var(--texte);
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== 11. Page "Notre histoire" =====
   Une suite de blocs de texte centrés, en alternant le fond (crème /
   sable) pour rythmer la lecture, puis une rangée de 3 "symboles"
   (même pastille ronde que sur les fiches produit) et une signature.
*/

.hero--histoire {
  padding: 70px 20px;
}

.histoire-bloc {
  max-width: 640px;
  margin: 0 auto;
  padding: 64px 40px;
  text-align: center;
}

.histoire-bloc--alt {
  max-width: none;
  background: var(--sable);
}

.histoire-bloc--alt > * {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.histoire-bloc h2 {
  font-size: 26px;
  font-weight: normal;
  color: var(--marine);
  margin-bottom: 20px;
}

.histoire-bloc p {
  color: var(--texte);
}

/* Les 3 symboles : une rangée qui passe à la ligne sur petit écran. */
.histoire-symboles {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-top: 40px;
}

.symbole {
  max-width: 200px;
}

.symbole h3 {
  font-size: 15px;
  font-weight: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--marine);
  margin: 16px 0 8px;
}

.symbole p {
  font-size: 13px;
  color: #6b6659;
}

.histoire-signature {
  text-align: center;
  padding: 70px 40px 90px;
}

.histoire-signature p {
  font-size: 22px;
  font-style: italic;
  color: var(--marine);
  max-width: 560px;
  margin: 0 auto;
}

.histoire-signature-nom {
  margin-top: 16px;
  font-size: 14px !important;
  font-style: normal !important;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #8a8577 !important;
}

/* ===== 12. Adaptation mobile ===== */

@media (max-width: 720px) {
  .site-header {
    flex-direction: column;
    gap: 12px;
    padding: 16px;
  }
  .hero-shoot {
    height: 60vh;
    min-height: 380px;
  }
  .hero-shoot-texte h1 {
    font-size: 30px;
  }
  /* Les 3 photos éditoriales passent en une colonne, plus lisibles. */
  .editorial {
    grid-template-columns: 1fr;
  }
  .editorial-vignette {
    aspect-ratio: 4 / 3;
  }
  .fiche-produit {
    flex-direction: column;
    gap: 28px;
  }
  .fiche-visuel {
    width: 100%;
  }
  /* Sur mobile on réorganise la ligne du panier avec des "zones" nommées :
     le maillot à gauche sur 2 rangées, infos en haut, quantité + prix en bas. */
  .ligne-panier {
    grid-template-columns: 60px 1fr auto;
    grid-template-areas:
      "photo infos    infos"
      "photo quantite prix";
    row-gap: 10px;
  }
  .photo--mini   { grid-area: photo; width: 60px; }
  .ligne-infos   { grid-area: infos; }
  .ligne-quantite { grid-area: quantite; }
  .ligne-prix    { grid-area: prix; }
  .histoire-bloc {
    padding: 48px 24px;
  }
  .histoire-symboles {
    gap: 28px;
  }
}