/* Le Fournil d'Exemple : projet d'exemple Licane */
@font-face { font-family: "Gloock"; src: url("fonts/Gloock-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/InstrumentSans-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --creme: #F7F1E6;
  --creme-clair: #FFFBF4;
  --ligne: #E3D5BF;
  --ligne-forte: #CDB38F;
  --brun: #3F2A1D;
  --brun-doux: #6B4F3C;
  --croute: #9A5524;
  --croute-fonce: #7C4219;
  --ble: #E9C9A4;
  --titre: "Gloock", Georgia, serif;
  --italique: "Instrument Serif", Georgia, serif;
  --texte: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --marge: 16px;
  --largeur: 1280px;
  /* Largeur à ajouter pour qu'un élément touche le bord de l'écran */
  --fuite: calc(var(--marge) + max(0px, (100vw - var(--largeur)) / 2));
}
@media (min-width: 640px) { :root { --marge: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { margin: 0; background: var(--creme); color: var(--brun); font: 400 1.0625rem/1.6 var(--texte); }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
a { color: var(--croute-fonce); }
a:focus-visible, .bouton:focus-visible { outline: 3px solid var(--croute); outline-offset: 3px; }
.bandeau-exemple a:focus-visible, .pratique a:focus-visible, .pied a:focus-visible { outline-color: var(--ble); }

h1, h2, h3 { font-family: var(--titre); font-weight: 400; line-height: 1; margin: 0 0 .4em; letter-spacing: -.01em; }
h2 { font-size: clamp(2.6rem, 7vw, 5.5rem); }
h3 { font-size: 1.6rem; line-height: 1.1; }
em { font-family: var(--italique); font-style: italic; font-weight: 400; }
h1 em, h2 em { letter-spacing: 0; }
p { margin: 0 0 1em; }

.evitement { position: absolute; left: -9999px; }
.evitement:focus { left: 16px; top: 16px; z-index: 10; background: var(--creme-clair); padding: 8px 12px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icone { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Grille : 6 colonnes sur téléphone, 12 sur ordinateur */
.grille {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 12px;
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 0 var(--marge);
}
.grille > * { grid-column: 1 / -1; }
@media (min-width: 860px) { .grille { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; } }

.surtitre { font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--croute-fonce); margin-bottom: .8em; }

/* Mot posé sur une bande de papier crème */
.bande { display: block; width: fit-content; background: var(--creme); padding: .02em .14em .08em; }

/* Bandeau « projet d'exemple » */
.bandeau-exemple { background: var(--brun); color: var(--creme); font-size: .9rem; text-align: center; padding: 8px 16px; }
.bandeau-exemple p { margin: 0; }
.bandeau-exemple a { color: var(--creme); }

/* En-tête */
.entete { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.entete__ligne { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--brun); }
.marque { display: flex; align-items: center; gap: 10px; color: var(--brun); text-decoration: none; font: 400 1.5rem/1.1 var(--titre); }
.marque em { font-size: 1.1em; }
.marque__epi { width: 28px; height: 28px; fill: none; stroke: var(--croute); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 22px; }
.menu a { display: inline-block; color: var(--brun); text-decoration: none; font-weight: 700; font-size: .95rem; padding: 10px 0; border-bottom: 2px solid transparent; }
.menu a:hover { border-bottom-color: var(--croute); }

/* Boutons */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.bouton { display: inline-block; padding: 14px 22px; border-radius: 4px; font-weight: 700; text-decoration: none; border: 2px solid var(--croute-fonce); transition: background-color .15s, color .15s; }
.bouton--plein { background: var(--croute-fonce); color: var(--creme-clair); }
.bouton--plein:hover { background: var(--brun); border-color: var(--brun); }
.bouton--contour { color: var(--croute-fonce); }
.bouton--contour:hover { background: var(--croute-fonce); color: var(--creme-clair); }

/* ===== Accueil ===== */
.une { padding: 28px 0 40px; }
.une__titre { position: relative; z-index: 2; font-size: clamp(2.6rem, 11vw, 8.6rem); line-height: .92; margin: 0; }
.une__titre .bande--decale { margin-left: .9em; font-size: .78em; color: var(--croute-fonce); }
.une__titre .bande--loin { margin-left: .35em; }
.une__photo { position: relative; grid-column: 2 / -1; margin-top: -.6em; font-size: clamp(2.6rem, 11vw, 8.6rem); }
.une__photo img { width: 100%; aspect-ratio: 25 / 21; object-fit: cover; border-radius: 4px; }
.une__texte { grid-column: 1 / 6; margin-top: 56px; }
.une__intro { font-size: 1.2rem; color: var(--brun-doux); }
.infos { list-style: none; padding: 0; margin: 20px 0 26px; display: grid; gap: 10px; }
.infos li { display: flex; gap: 10px; align-items: center; }
.infos .icone { color: var(--croute); }

.tampon { position: absolute; width: clamp(110px, 28vw, 168px); height: auto; left: -14%; bottom: -12%; rotate: -12deg; z-index: 3; }
.tampon circle { fill: var(--croute-fonce); }
.tampon text { font: 700 14px var(--texte); fill: var(--creme); }
.tampon__epi path { fill: none; stroke: var(--ble); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

@media (min-width: 860px) {
  .une { padding: 48px 0 64px; }
  .une__surtitre { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .une__titre { grid-column: 1 / 11; grid-row: 2 / 4; align-self: start; font-size: clamp(3rem, 7.6vw, 7.4rem); }
  .une__photo { grid-column: 7 / 13; grid-row: 1 / 5; margin-top: 0; font-size: clamp(3rem, 7.6vw, 7.4rem); }
  .une__photo img { aspect-ratio: 4 / 5; }
  .une__texte { grid-column: 2 / 6; grid-row: 4; margin-top: 48px; }
  .tampon { left: -84px; bottom: -64px; }
  .une__titre .bande--loin { margin-left: 1.2em; white-space: nowrap; }
}

/* Mot géant en contour, qui déborde de l'écran */
.mot-geant { overflow: hidden; pointer-events: none; user-select: none; margin: 24px 0 16px; font: 400 clamp(4.2rem, 20vw, 16rem)/.82 var(--titre); }
@media (min-width: 860px) { .mot-geant { margin-bottom: -.1em; } }
.mot-geant span { display: block; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px var(--ligne-forte); padding-left: 6vw; }

/* ===== Pains ===== */
.pains { padding: 0 0 72px; }
.pains__texte { position: relative; z-index: 1; grid-column: 1 / -1; }
.lettrine { max-width: 30em; font-size: 1.1rem; }
.lettrine::first-letter { float: left; font: 400 4.2em/.8 var(--titre); color: var(--croute-fonce); margin: .08em .04em 0 0; }
.pains__photo { grid-column: 1 / 6; margin-top: 12px; }
.pains__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; }
.ardoise {
  position: relative; z-index: 2; grid-column: 2 / -1; margin-top: -72px;
  background: var(--brun); color: var(--creme); padding: 26px 24px 18px; border-radius: 4px;
  rotate: -1.6deg; box-shadow: 0 18px 40px -18px rgba(63, 42, 29, .55);
}
.ardoise__titre { font: italic 400 2rem/1 var(--italique); color: var(--ble); margin-bottom: 10px; }
.ardoise .tarifs li { border-bottom-color: rgba(247, 241, 230, .22); }
.ardoise__note { font-size: .92rem; color: var(--ligne); margin: 12px 0 0; }

@media (min-width: 860px) {
  .pains { padding-bottom: 120px; }
  .pains__photo { grid-column: 1 / 6; grid-row: 1 / 3; margin-top: 0; }
  .pains__texte { grid-column: 7 / 12; grid-row: 1; padding-top: 64px; }
  .ardoise { grid-column: 5 / 11; grid-row: 2; margin-top: 24px; align-self: end; margin-bottom: -48px; padding: 34px 40px 24px; }
}

/* Listes de prix */
.tarifs { list-style: none; padding: 0; margin: 0; }
.tarifs li { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ligne); }
.tarifs li span:first-child { flex: 1; }
.prix { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== Viennoiseries ===== */
.viennoiseries { padding: 40px 0 72px; }
.viennoiseries__surtitre { grid-column: 2 / -1; }
.titre-geant { position: relative; z-index: 2; grid-column: 1 / -1; font-size: clamp(2.6rem, 11.2vw, 10rem); margin: 0 0 -.42em; hyphens: manual; }
.titre-geant .bande { padding-right: .2em; }
.pleine-largeur img { width: 100%; height: clamp(300px, 62vh, 640px); object-fit: cover; }
.citation {
  position: relative; z-index: 2; grid-column: 1 / 6; margin: -56px 0 28px;
  background: var(--creme); padding: 22px 22px 18px 0;
  font: 400 clamp(1.6rem, 4.4vw, 2.6rem)/1.12 var(--titre);
}
.citation em { color: var(--croute-fonce); }
.tarifs--colonnes { grid-column: 2 / -1; }

@media (min-width: 860px) {
  .viennoiseries { padding: 72px 0 120px; }
  .viennoiseries__surtitre { grid-column: 4 / 10; }
  .titre-geant { grid-column: 2 / -1; font-size: clamp(3.2rem, 9.6vw, 8.6rem); }
  .citation { grid-column: 1 / 7; margin-top: -120px; padding: 36px 40px 30px 0; }
  .tarifs--colonnes { grid-column: 8 / 13; padding-top: 40px; }
}

/* ===== Pâtisseries ===== */
.patisseries { padding: 24px 0 96px; }
.patisseries__photo { grid-column: 2 / -1; margin: 28px calc(-1 * var(--fuite)) 0 0; }
.patisseries__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px 0 0 4px; }
.billet {
  position: relative; z-index: 2; grid-column: 1 / 6; margin-top: -64px;
  background: var(--creme-clair); padding: 30px 24px 20px; rotate: .8deg;
  box-shadow: 0 14px 34px -16px rgba(63, 42, 29, .45);
}
.billet::before { content: ""; position: absolute; top: -12px; left: 50%; width: 92px; height: 26px; translate: -50% 0; rotate: -4deg; background: rgba(233, 201, 164, .75); }
.billet p { margin: 0; }
.billet h3 { letter-spacing: 0; }

@media (min-width: 860px) {
  .patisseries { padding: 48px 0 140px; }
  .patisseries__texte { grid-column: 1 / 6; grid-row: 1; padding-top: 96px; }
  .patisseries__photo { grid-column: 7 / 13; grid-row: 1 / 3; margin-top: 0; }
  .billet { grid-column: 4 / 8; grid-row: 2; margin-top: 40px; align-self: start; margin-bottom: -80px; padding: 36px 34px 26px; }
}

/* ===== Infos pratiques ===== */
.pratique {
  background-color: var(--brun); color: var(--creme); padding: 56px 0 72px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23E9C9A4' stroke-opacity='.09' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(14 14) rotate(-20 12 12)'%3E%3Cpath d='M12 22V8M12 8c-2-2-2-5 0-7 2 2 2 5 0 7ZM12 13c-3 0-5-2-5-5 3 0 5 2 5 5ZM12 13c3 0 5-2 5-5-3 0-5 2-5 5ZM12 18c-3 0-5-2-5-5 3 0 5 2 5 5ZM12 18c3 0 5-2 5-5-3 0-5 2-5 5Z'/%3E%3C/g%3E%3Cg transform='translate(74 70) rotate(25 12 12)'%3E%3Cpath d='M12 22V8M12 8c-2-2-2-5 0-7 2 2 2 5 0 7ZM12 13c-3 0-5-2-5-5 3 0 5 2 5 5ZM12 13c3 0 5-2 5-5-3 0-5 2-5 5ZM12 18c-3 0-5-2-5-5 3 0 5 2 5 5ZM12 18c3 0 5-2 5-5-3 0-5 2-5 5Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.pratique .surtitre { color: var(--ble); }
.pratique__accroche { margin: 0 0 24px; line-height: .85; }
.pratique__petit { display: block; font: italic 400 clamp(1.5rem, 4vw, 2.4rem) var(--italique); color: var(--ble); margin-left: .2em; }
.pratique__heure { display: block; font: 400 clamp(5rem, 24vw, 15rem)/.85 var(--titre); white-space: nowrap; letter-spacing: -.03em; }
.pratique__horaires { grid-column: 2 / -1; }
.pratique__acces { grid-column: 1 / 6; margin-top: 40px; }
.pratique h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); }
.horaires { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.horaires th, .horaires td { text-align: left; padding: 12px 0; border-bottom: 1px solid rgba(247, 241, 230, .2); vertical-align: top; }
.horaires th { font-weight: 700; padding-right: 20px; white-space: nowrap; }
@media (max-width: 539px) {
  .horaires tr { display: block; padding: 10px 0; border-bottom: 1px solid rgba(247, 241, 230, .2); }
  .horaires th, .horaires td { display: block; padding: 0; border: 0; }
}
.pratique .note { color: var(--ligne); }
.contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.contact li { display: flex; gap: 12px; align-items: flex-start; }
.contact .icone { color: var(--ble); margin-top: 2px; }
.contact small { color: var(--ligne); font-size: .85rem; }

@media (min-width: 860px) {
  .pratique { padding: 120px 0 120px; }
  .pratique__accroche { grid-column: 1 / 9; grid-row: 1; }
  .pratique__horaires { grid-column: 8 / 13; grid-row: 1 / 3; padding-top: 88px; }
  .pratique__acces { grid-column: 2 / 6; grid-row: 2; margin-top: 48px; }
}

/* Pied de page */
.pied { background: #2E1E14; color: var(--ligne); padding: 40px 0; font-size: .92rem; }
.pied__nom { font: 400 2rem/1 var(--titre); color: var(--creme); }
.pied__texte p { margin: 0 0 .5em; }
.pied a { color: var(--creme); }
@media (min-width: 860px) {
  .pied__nom { grid-column: 1 / 6; }
  .pied__texte { grid-column: 7 / 13; }
}

/* ===== Animations : seulement si la personne n'a pas demandé à réduire les mouvements ===== */
@media (prefers-reduced-motion: no-preference) {
  .bouton { transition: background-color .15s, color .15s; }

  /* À l'ouverture : les bandes du titre glissent depuis la gauche, la photo recule */
  .une__titre .bande { animation: glisser-gauche .8s cubic-bezier(.2, .7, .2, 1) both; }
  .une__titre .bande:nth-child(2) { animation-delay: .05s; }
  .une__titre .bande:nth-child(3) { animation-delay: .1s; }
  .une__texte, .une__surtitre { animation: monter .8s .15s cubic-bezier(.2, .7, .2, 1) both; }
  .une__photo { overflow: visible; }
  .une__photo img { animation: reculer 1.4s cubic-bezier(.2, .7, .2, 1) both; }

  @supports (animation-timeline: view()) {
    /* Au défilement : photos, ardoise, citation et billet glissent en place */
    .pains__photo, .ardoise, .citation, .tarifs--colonnes, .patisseries__photo, .billet, .pratique__horaires, .pratique__acces {
      animation: monter linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 45%;
    }
    /* Le mot géant et le tampon suivent le défilement */
    .mot-geant span { animation: defiler linear both; animation-timeline: view(); }
    .tampon { animation: tourner linear both; animation-timeline: scroll(); }
    .pratique { animation: motif linear both; animation-timeline: view(); }
  }
}
@keyframes monter { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes glisser-gauche { from { opacity: 0; translate: -40px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes reculer { from { scale: 1.07; } to { scale: 1; } }
@keyframes defiler { from { translate: 4vw 0; } to { translate: -22vw 0; } }
@keyframes tourner { from { rotate: -12deg; } to { rotate: 160deg; } }
@keyframes motif { from { background-position: 0 0; } to { background-position: 0 -240px; } }