/* ==========================================================================
   Boulangerie Faye — feuille de style unique
   --------------------------------------------------------------------------
   Organisation du fichier (dans l'ordre) :
     1. Polices auto-hébergées
     2. Variables (couleurs, espacements, typographie)
     3. Remise à zéro + réglages de base
     4. Typographie
     5. Outils (conteneur, lien d'évitement, texte masqué, boutons)
     6. En-tête + menu (mobile d'abord)
     7. Sections de la page d'accueil (bandeau, annonce, spécialités,
        notre boulangerie, nos boulangeries)
     8. Page contact (formulaire)
     9. Pied de page
    10. Écrans larges (media queries)

   Approche "mobile-first" : les styles par défaut sont pour le téléphone,
   puis on ajoute des règles pour les écrans plus larges en bas du fichier.
   ========================================================================== */


/* ==========================================================================
   1. POLICES AUTO-HÉBERGÉES
   --------------------------------------------------------------------------
   Lora (serif) pour les titres, Source Sans 3 (sans-serif) pour le texte.
   Ce sont des polices "variables" : un seul fichier couvre toutes les
   graisses de 400 (normal) à 700 (gras). font-display: swap affiche le
   texte immédiatement avec une police système en attendant le chargement,
   donc pas de texte invisible ni de blocage.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Lora";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/lora-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-italic.woff2") format("woff2");
}


/* ==========================================================================
   2. VARIABLES
   --------------------------------------------------------------------------
   Toutes les couleurs et mesures réutilisées sont définies ici, une seule
   fois. Pour changer une couleur sur tout le site, on ne modifie que cette
   liste.
   ========================================================================== */

:root {
  /* Couleurs de la charte (extraites du logo) */
  --brun:        #2E1D06;   /* titres, texte principal, bandes sombres */
  --dore:        #C78419;   /* accents, filets, mentions sur fond sombre */
  --dore-clair:  #E8C77A;   /* enseigne en italique sur le bandeau */
  --dore-fonce:  #9A6410;   /* liens sur fond clair (contraste AA) */
  --lavande:     #756290;   /* touche secondaire, avec parcimonie */
  --creme:       #F7F0E3;   /* fonds de sections alternées */
  --ivoire:      #FDFAF3;   /* fond général du site */
  --blanc:       #FFFFFF;   /* cartes posées sur fond crème */

  /* Couleurs utilitaires */
  --texte:       var(--brun);
  --texte-doux:  #5A4A33;   /* texte secondaire (sous-titres, notes) — contraste AA sur ivoire/crème */
  --erreur:      #A32D2D;   /* messages d'erreur du formulaire */
  --succes:      #2F6B3A;   /* message de confirmation */
  --bordure:     #E3D9C5;   /* filets discrets */

  /* Typographie */
  --police-titres: "Lora", Georgia, "Times New Roman", serif;
  --police-texte:  "Source Sans 3", "Segoe UI", Roboto, Arial, sans-serif;

  /* Espacements */
  --espace-section: 3.5rem;   /* espace vertical entre les sections (mobile) */
  --largeur-max:    72rem;    /* largeur maximale du contenu (≈ 1150 px) */
  --gouttiere:      1.25rem;  /* marge gauche/droite sur mobile */

  /* Angles arrondis doux */
  --rayon:        10px;
  --rayon-carte:  14px;

  /* Ombre très légère, uniquement pour détacher les cartes blanches du fond crème */
  --ombre-douce:  0 2px 10px rgba(46, 29, 6, 0.06);
}


/* ==========================================================================
   3. REMISE À ZÉRO + RÉGLAGES DE BASE
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;   /* la largeur inclut les marges intérieures et bordures */
}

html {
  scroll-behavior: smooth;            /* défilement doux vers les ancres (#contact, etc.) */
  -webkit-text-size-adjust: 100%;     /* empêche iOS d'agrandir le texte tout seul */
}

/* Si l'utilisateur préfère moins d'animations, on respecte son choix */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background-color: var(--ivoire);
  color: var(--texte);
  font-family: var(--police-texte);
  font-size: 1.0625rem;   /* 17 px : un peu plus grand que la norme, plus lisible */
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;      /* le pied de page reste en bas même si la page est courte */
}

main {
  flex: 1;   /* occupe l'espace disponible pour pousser le pied de page en bas */
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
  height: auto;   /* les images gardent leurs proportions */
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;   /* par défaut le navigateur met <address> en italique */
}


/* ==========================================================================
   4. TYPOGRAPHIE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--police-titres);
  font-weight: 600;
  line-height: 1.2;
  color: var(--brun);
  margin: 0 0 0.75em;
}

/* Tailles "fluides" : grandissent doucement avec la largeur de l'écran.
   clamp(minimum, valeur idéale, maximum). */
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw + 0.75rem, 2.25rem); }
h3 { font-size: clamp(1.25rem, 1.5vw + 0.75rem, 1.5rem); }

p {
  margin: 0 0 1em;
}

strong {
  font-weight: 600;
}

/* Liens : dorés foncés sur fond clair (contraste AA vérifié), soulignés
   pour ne pas se reposer uniquement sur la couleur. */
a {
  color: var(--dore-fonce);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 1px;
}
a:hover {
  color: var(--brun);
}

/* Focus visible au clavier : un anneau doré net, partout sur le site */
:focus-visible {
  outline: 3px solid var(--dore);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Titre de section centré avec un petit filet doré dessous */
.titre-section {
  text-align: center;
  margin-bottom: 2.5rem;
}
.titre-section h2::after {
  content: "";
  display: block;
  width: 3rem;
  height: 3px;
  margin: 0.6rem auto 0;
  background-color: var(--dore);
  border-radius: 2px;
}
.titre-section .sous-titre {
  color: var(--texte-doux);
  font-size: 1.125rem;
  margin-top: -0.25rem;
}


/* ==========================================================================
   5. OUTILS
   ========================================================================== */

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

/* Conteneur plus étroit pour les blocs de texte (lecture confortable) */
.conteneur--etroit {
  max-width: 46rem;
}

/* Section : espace vertical généreux */
.section {
  padding-top: var(--espace-section);
  padding-bottom: var(--espace-section);
  scroll-margin-top: 4.5rem;   /* quand on arrive par une ancre (#boulangeries),
                                  le titre n'est pas caché sous l'en-tête collant */
}
.section--creme  { background-color: var(--creme); }
.section--ivoire { background-color: var(--ivoire); }
/* Fin liseré ivoire au-dessus d'une section : sépare deux sections crème
   qui se suivent (Notre boulangerie / Nos boulangeries) */
.section--separee { border-top: 0.5rem solid var(--ivoire); }

/* Lien d'évitement : invisible jusqu'à ce qu'on le sélectionne au clavier
   (touche Tab). Il permet de sauter directement au contenu principal. */
.lien-evitement {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  background-color: var(--brun);
  color: var(--blanc);
  border-radius: 0 0 var(--rayon) var(--rayon);
  text-decoration: none;
  font-weight: 600;
}
.lien-evitement:focus {
  top: 0;
}

/* Centre le texte d'un bloc */
.texte-centre { text-align: center; }

/* Texte présent pour les lecteurs d'écran mais masqué visuellement */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Boutons */
.bouton {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  border: 2px solid var(--brun);
  border-radius: var(--rayon);
  background-color: var(--brun);
  color: var(--blanc);
  font-family: var(--police-texte);
  font-size: 1.0625rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.bouton:hover,
.bouton:focus-visible {
  background-color: var(--dore-fonce);
  border-color: var(--dore-fonce);
  color: var(--blanc);
}
/* Variante "contour" : fond transparent, utile sur fond sombre */
.bouton--contour {
  background-color: transparent;
  color: var(--brun);
}
.bouton--contour:hover,
.bouton--contour:focus-visible {
  background-color: var(--brun);
  color: var(--blanc);
}


/* ==========================================================================
   6. EN-TÊTE + MENU
   --------------------------------------------------------------------------
   Sur mobile : logo à gauche, bouton "hamburger" à droite, menu déroulant
   en dessous. Sur écran large : menu en ligne, bouton caché.
   ========================================================================== */

.entete {
  position: sticky;   /* reste visible en haut quand on fait défiler */
  top: 0;
  z-index: 100;
  background-color: var(--ivoire);
  border-bottom: 1px solid var(--bordure);
}

/* La barre contient le logo, le bouton ET le menu. Sur mobile le menu
   passe à la ligne (flex-wrap) ; sur grand écran il se place à droite. */
.entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 1rem;
  min-height: 4.25rem;
}

/* Logo + nom de la boulangerie */
.entete__logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--brun);
  text-decoration: none;
}
.entete__logo img {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;   /* le logo est rond */
}
.entete__nom {
  font-family: var(--police-titres);
  font-weight: 600;
  font-size: 1.2rem;
  line-height: 1.1;
}
.entete__enseigne {
  display: block;
  font-family: var(--police-texte);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--texte-doux);
}

/* Bouton du menu mobile */
.menu-bouton {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: transparent;
  color: var(--brun);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* Les trois petites barres du bouton, dessinées en CSS */
.menu-bouton__icone {
  position: relative;
  width: 1.25rem;
  height: 2px;
  background-color: currentColor;
}
.menu-bouton__icone::before,
.menu-bouton__icone::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: currentColor;
}
.menu-bouton__icone::before { top: -6px; }
.menu-bouton__icone::after  { top: 6px; }

/* Le menu lui-même : caché par défaut sur mobile, ouvert via JS */
.menu {
  display: none;
  flex-basis: 100%;   /* occupe toute la largeur, sous le logo */
  padding-bottom: 1rem;
}
.menu[data-ouvert="true"] {
  display: block;
}
.menu a {
  display: block;
  padding: 0.75rem 0.5rem;
  border-top: 1px solid var(--bordure);
  color: var(--brun);
  font-weight: 600;
  text-decoration: none;
}
.menu a:hover,
.menu a[aria-current="page"] {
  color: var(--dore-fonce);
}


/* ==========================================================================
   7. SECTIONS DE LA PAGE D'ACCUEIL
   ========================================================================== */

/* --- 7a. Bandeau plein écran --------------------------------------------- */
.bandeau {
  position: relative;
  min-height: 60vh;
  display: grid;
  place-items: center;   /* centre le texte horizontalement et verticalement */
  text-align: center;
  color: var(--blanc);
  overflow: hidden;
}
.bandeau__image {
  position: absolute;
  inset: 0;              /* raccourci pour top/right/bottom/left : 0 */
  width: 100%;
  height: 100%;
  object-fit: cover;     /* la photo remplit le cadre sans se déformer */
  object-position: 50% 48%;  /* cadrage sur le milieu de la photo : bandeau rouge + vitrine */
}
/* Voile brun à 60 % par-dessus la photo pour rendre le texte lisible */
.bandeau::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(46, 29, 6, 0.6);
}
.bandeau__contenu {
  position: relative;    /* passe au-dessus du voile */
  margin: 2rem var(--gouttiere);
  padding: 1.75rem 2rem 1.5rem;
  /* Cartouche brun semi-transparent derrière le texte : le nom, l'enseigne
     dorée et le slogan restent lisibles quel que soit l'endroit de la photo */
  background-color: rgba(46, 29, 6, 0.62);
  border-radius: var(--rayon-carte);
  max-width: 42rem;
}
.bandeau h1 {
  color: var(--blanc);
  margin-bottom: 0.25em;
}
.bandeau h2 {
  color: var(--dore-clair);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw + 0.5rem, 1.9rem);
  margin-bottom: 0.75em;
}
.bandeau p {
  font-size: 1.15rem;
  margin: 0;
}

/* --- 7b. Bande d'annonce (fond brun) ------------------------------------- */
.annonce {
  background-color: var(--brun);
  color: var(--creme);
  text-align: center;
  padding: 1.75rem var(--gouttiere);
}
.annonce h3 {
  color: var(--dore);
  margin-bottom: 0.35em;
}
.annonce p {
  margin: 0;
}

/* --- 7c. Nos spécialités : trois vignettes ------------------------------- */
.specialites {
  display: grid;
  gap: 2rem;
  /* Une colonne sur mobile ; voir les media queries pour 3 colonnes */
}
.specialite {
  text-align: center;
}
.specialite img {
  width: 100%;
  aspect-ratio: 3 / 4;   /* format portrait imposé */
  object-fit: cover;
  border-radius: var(--rayon);
  margin-bottom: 1rem;
}
.specialite h3 {
  margin-bottom: 0.25em;
}
.specialite p {
  color: var(--texte-doux);
  margin: 0;
}

/* --- 7d. Notre boulangerie : texte de présentation ----------------------- */
.presentation p {
  font-size: 1.125rem;
}
.presentation p:last-child {
  font-family: var(--police-titres);
  font-style: italic;
  text-align: center;
  margin-top: 1.5rem;
}

/* --- 7e. Nos boulangeries : une carte blanche pleine largeur par boutique */
.boutiques {
  display: grid;
  gap: 1.5rem;
}
.boutique {
  background-color: var(--blanc);
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
  padding: 2.25rem 1.5rem;
  display: grid;
  gap: 1rem;
  /* Sur mobile : nom au-dessus, infos en dessous (une seule colonne) */
}
.boutique__nom {
  margin: 0;
  font-size: 1.45rem;
}
.boutique__nom .badge {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.15em 0.6em;
  font-family: var(--police-texte);
  font-size: 0.8rem;
  font-weight: 600;
  vertical-align: middle;
  color: var(--blanc);
  background-color: var(--dore-fonce);
  border-radius: 999px;
}
.boutique__infos p {
  margin-bottom: 0.5rem;
}
.boutique__infos p:last-child {
  margin-bottom: 0;
}
/* Les deux liens les plus utilisés du site : grands et faciles à toucher */
.boutique__infos a {
  display: inline-block;
  padding: 0.15rem 0;
  font-weight: 600;
}
.boutique__horaires {
  color: var(--texte-doux);
}
/* Bouton "Commandez dans cette boutique" (click & collect) : préparé dans
   le HTML, masqué (attribut hidden) tant que le site de commande n'existe pas */
.boutique__commande {
  margin-top: 1rem !important;
}
.boutique__infos .bouton--commande {
  text-decoration: none;   /* pas de soulignement comme les autres liens de la carte */
}
.bouton--commande {
  padding: 0.65rem 1.4rem;
  font-size: 1rem;
  background-color: var(--dore-fonce);
  border-color: var(--dore-fonce);
}
.bouton--commande:hover,
.bouton--commande:focus-visible {
  background-color: var(--brun);
  border-color: var(--brun);
}


/* ==========================================================================
   8. PAGE CONTACT — FORMULAIRE
   ========================================================================== */

.formulaire {
  display: grid;
  gap: 1.5rem;
  background-color: var(--blanc);
  padding: 2rem 1.5rem;
  border-radius: var(--rayon-carte);
  box-shadow: var(--ombre-douce);
}
.champ label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
}
/* L'astérisque des champs obligatoires, en doré */
.champ .obligatoire {
  color: var(--dore-fonce);
}
.champ input,
.champ select,
.champ textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1px solid #C9BCA3;
  border-radius: var(--rayon);
  background-color: var(--ivoire);
  color: var(--texte);
  font: inherit;
}
.champ textarea {
  min-height: 9rem;
  resize: vertical;
}
.champ input:focus,
.champ select:focus,
.champ textarea:focus {
  outline: 3px solid var(--dore);
  outline-offset: 1px;
  border-color: var(--dore-fonce);
}
/* Champ en erreur : bordure rouge + message texte (pas seulement la couleur) */
.champ input[aria-invalid="true"],
.champ select[aria-invalid="true"],
.champ textarea[aria-invalid="true"] {
  border-color: var(--erreur);
}
.champ__erreur {
  display: block;
  margin-top: 0.35rem;
  color: var(--erreur);
  font-size: 0.95rem;
  font-weight: 600;
}
.champ__erreur:empty {
  display: none;   /* pas d'espace vide quand il n'y a pas d'erreur */
}
.champ__aide {
  display: block;
  margin-top: 0.3rem;
  color: var(--texte-doux);
  font-size: 0.95rem;
}

/* Mention "(facultatif)" à côté d'un intitulé */
.champ__facultatif {
  font-weight: 400;
  color: var(--texte-doux);
  font-size: 0.95rem;
}
/* Notes sous le formulaire */
.formulaire__note,
.formulaire__rgpd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--texte-doux);
}

/* Pot de miel (honeypot) : champ invisible pour les humains, que les robots
   remplissent bêtement. On le sort de l'écran plutôt que display:none, car
   certains robots ignorent les champs en display:none. */
.champ--miel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Messages généraux (succès / erreur) affichés au-dessus du formulaire */
.message {
  padding: 1rem 1.25rem;
  border-radius: var(--rayon);
  border-left: 5px solid;
}
.message--succes {
  background-color: #EAF4EC;
  border-color: var(--succes);
  color: #1F4A28;
}
.message--erreur {
  background-color: #F9E9E9;
  border-color: var(--erreur);
  color: #7A1F1F;
}


/* ==========================================================================
   8b. PAGES DE TEXTE (mentions légales)
   ========================================================================== */
.page-texte h2 {
  font-size: 1.35rem;
  margin-top: 2.25rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--bordure);
}
.page-texte .liste {
  list-style: disc;        /* on remet les puces (la remise à zéro les enlève) */
  padding-left: 1.5rem;
  margin-bottom: 1em;
}
.page-texte .liste li {
  margin-bottom: 0.5em;
}


/* ==========================================================================
   9. PIED DE PAGE
   ========================================================================== */

.pied {
  background-color: var(--brun);
  color: var(--creme);
  padding: 2.5rem var(--gouttiere) 1.5rem;
  margin-top: auto;
}
.pied a {
  color: var(--dore-clair);
}
.pied a:hover {
  color: var(--blanc);
}
.pied__haut {
  text-align: center;
  margin-bottom: 2rem;
}
.pied__nom {
  font-family: var(--police-titres);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--dore);
  margin-bottom: 0.25em;
}
.pied__slogan {
  font-family: var(--police-titres);
  font-style: italic;
  font-size: 1.1rem;
  margin: 0;
}
.pied__colonnes {
  display: grid;
  gap: 2rem;
}
.pied__titre {
  font-family: var(--police-titres);
  font-weight: 600;
  color: var(--dore);
  font-size: 1.1rem;
  margin-bottom: 0.5em;
}
.pied p {
  margin-bottom: 0.35em;
  font-size: 0.95rem;
}
.pied__bas {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(247, 240, 227, 0.2);
  font-size: 0.9rem;
  text-align: center;
}


/* ==========================================================================
   10. ÉCRANS LARGES
   --------------------------------------------------------------------------
   À partir de 48rem (≈ 768 px, tablette) puis 64rem (≈ 1024 px, ordinateur).
   ========================================================================== */

@media (min-width: 48rem) {
  :root {
    --espace-section: 4.5rem;   /* encore plus d'air entre les sections */
    --gouttiere: 2rem;
  }

  /* Menu en ligne, bouton hamburger caché */
  .menu-bouton {
    display: none;
  }
  .menu {
    display: block;
    flex-basis: auto;      /* ne prend plus toute la largeur... */
    margin-left: auto;     /* ...et se cale à droite */
    padding-bottom: 0;
  }
  .menu ul {
    display: flex;
    gap: 0.5rem;
  }
  .menu a {
    border-top: none;
    padding: 0.5rem 0.85rem;
    border-radius: var(--rayon);
  }
  .menu a[aria-current="page"] {
    background-color: var(--creme);
  }
  /* Lien "Accès clients" (pros) : légèrement distingué, contour doré */
  .menu a.menu__pro {
    border: 1px solid var(--dore-fonce);
    margin-left: 0.5rem;
  }

  /* Spécialités : trois vignettes côte à côte */
  .specialites {
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
  }

  /* Carte boutique : nom à gauche (38 %), infos à droite */
  .boutique {
    grid-template-columns: 38% 1fr;
    align-items: start;
    gap: 2rem;
    padding: 2.25rem 2.5rem;
  }

  /* Pied de page : colonnes */
  .pied__colonnes {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Formulaire : plus d'air à l'intérieur */
  .formulaire {
    padding: 2.5rem;
  }
}

@media (min-width: 64rem) {
  .bandeau {
    min-height: 60vh;
  }
  .bandeau__image {
    /* Même cadrage que l'ancien site : le milieu de la photo (bandeau rouge,
       "Campaillette" et la vitrine). La grande enseigne du haut n'est pas
       visible, c'est voulu : le texte reste bien lisible sur la vitrine. */
    object-position: 50% 48%;
  }
}