/* Exemples de sites fictifs : une base commune, trois mises en page, sept identités */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 64px; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 400 1.05rem/1.6 var(--corps); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
.fictif { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 16px; background: #18170F; color: #F6F3EA; font: 600 .85rem/1.3 system-ui, sans-serif; }
.fictif__retour { flex: none; padding: 8px 14px; border-radius: 999px; background: #F1CB1C; color: #18170F; font-weight: 700; text-decoration: none; }
@media (max-width: 640px) {
  .fictif { justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: .78rem; }
  .fictif__plus { display: none; }
}
.tete { display: flex; align-items: center; gap: 32px; padding: 20px clamp(16px, 5vw, 64px); }
.marque { margin-right: auto; font: 700 1.3rem/1 var(--titre); }
.tete nav { display: flex; gap: 26px; }
.tete nav a { text-decoration: none; font-weight: 600; }
.bouton { display: inline-block; padding: 13px 24px; border-radius: var(--rayon); background: var(--accent); color: var(--sur-accent); font-weight: 700; text-decoration: none; }
.bloc { padding: clamp(48px, 8vw, 96px) clamp(16px, 5vw, 64px); }
.bloc h2, .deux h2 { margin-bottom: 18px; font: 700 clamp(1.8rem, 3.6vw, 2.8rem)/1.1 var(--titre); }
.bloc--fond { background: var(--fort); color: var(--sur-fort); text-align: center; }
.chapo { font-size: 1.15rem; }
.trois { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.trois h3 { margin: 14px 0 4px; font: 700 1.25rem/1.2 var(--titre); }
.trois b { display: block; margin-top: 8px; color: var(--accent); font-size: 1.15rem; }
.infos { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.heures { margin: 0; padding: 0; list-style: none; }
.heures li { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.pied { padding: 26px; background: var(--fort); color: var(--sur-fort); text-align: center; font-size: .95rem; }
.deux { display: grid; grid-template-columns: 1fr 1fr; }
.deux img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sur { margin-bottom: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: .86rem; }

/* Mise en page centrée */
.l-centre .une { padding: clamp(32px, 6vw, 72px) clamp(16px, 5vw, 64px) 0; text-align: center; }
.l-centre h1 { font: 700 clamp(2.6rem, 6vw, 5rem)/1.04 var(--titre); }
.l-centre .chapo { max-width: 34em; margin: 18px auto 36px; }
.l-centre .une img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: 28px; }
.l-centre .trois img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 20px; }
.l-centre .bloc--fond .bouton { margin-top: 26px; }
.l-centre .bloc--fond .chapo { margin-bottom: 0; }

/* Mise en page pleine image */
.l-image .tete { position: absolute; left: 0; right: 0; z-index: 2; color: #fff; }
.l-image .une { display: flex; align-items: flex-end; min-height: 760px; padding: clamp(32px, 6vw, 72px); color: #fff; background: linear-gradient(rgba(10, 12, 10, .82), transparent 24%, transparent 34%, rgba(10, 12, 10, .94)), var(--photo) center / cover; }
.l-image h1 { margin-bottom: 26px; font: 500 clamp(2.6rem, 6vw, 5.2rem)/1.06 var(--titre); }
.l-image h1 em { color: var(--clair); }
.l-image .carte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; }
.l-image .carte h3 { margin-bottom: 12px; color: var(--souligne); font: 500 1.4rem/1.2 var(--titre); }
.l-image .plat { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--trait); }
.l-image .creneaux { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.l-image .creneaux span { padding: 12px 20px; border: 1px solid var(--clair); }

/* Mise en page coupée en deux */
.l-split .une { display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; min-height: 620px; background: var(--fort); color: var(--sur-fort); }
.l-split .une__texte { padding: clamp(32px, 6vw, 72px); }
.l-split h1 { margin-bottom: 18px; font: 800 clamp(2.6rem, 5.2vw, 4.6rem)/1.02 var(--titre); }
.l-split .chapo { margin-bottom: 28px; }
.l-split .une img { width: 100%; height: 100%; object-fit: cover; clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%); }
.l-split .trois article { padding: 28px; border-radius: 10px; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.l-split .num { color: var(--accent); font: 800 2rem/1 var(--titre); }
.l-split .deux > div { display: flex; flex-direction: column; justify-content: center; padding: clamp(32px, 6vw, 72px); background: #fff; }
.l-split .faux-form { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 980px; margin: 18px auto 0; text-align: left; }
.l-split .faux-form span { padding: 14px; border-radius: 6px; background: #fff; color: #5C6472; }
.l-split .faux-form strong { padding: 14px; border-radius: 6px; background: var(--accent); color: var(--sur-accent); text-align: center; }

/* Les sept identités */
.t-boul { --fond: #FBF5EA; --texte: #3E2613; --accent: #9C5420; --sur-accent: #fff; --fort: #3E2613; --sur-fort: #FBF5EA; --trait: rgba(62, 38, 19, .18); --rayon: 999px; --titre: Fraunces, Georgia, serif; --corps: Nunito, system-ui, sans-serif; }
.t-resto { --fond: #16211C; --texte: #EFE8DA; --accent: #D4B483; --sur-accent: #16211C; --clair: #D4B483; --souligne: #D4B483; --fort: #0F1714; --sur-fort: #EFE8DA; --trait: rgba(239, 232, 218, .2); --rayon: 2px; --titre: "Playfair Display", Georgia, serif; --corps: Lato, system-ui, sans-serif; }
.t-garage { --fond: #F4F5F7; --texte: #12233F; --accent: #C8431C; --sur-accent: #fff; --fort: #12233F; --sur-fort: #fff; --trait: rgba(18, 35, 63, .18); --rayon: 6px; --titre: Archivo, Arial, sans-serif; --corps: Inter, system-ui, sans-serif; }
.t-garage h1 { font-weight: 900; text-transform: uppercase; }
.t-garage .marque { font-weight: 900; letter-spacing: .02em; }
.t-salon { --fond: #FFF7F6; --texte: #2B1B22; --accent: #A33A5B; --sur-accent: #fff; --fort: #2B1B22; --sur-fort: #FFF7F6; --trait: rgba(43, 27, 34, .16); --rayon: 12px; --titre: "DM Serif Display", Georgia, serif; --corps: "DM Sans", system-ui, sans-serif; }
.t-salon h1, .t-salon .bloc h2, .t-salon .trois h3 { font-weight: 400; }
.t-fleurs { --fond: #F6F2E7; --texte: #1D3A2E; --accent: #1D3A2E; --sur-accent: #F6F2E7; --clair: #E9C9B4; --souligne: #8A4B2F; --fort: #1D3A2E; --sur-fort: #F6F2E7; --trait: rgba(29, 58, 46, .2); --rayon: 999px; --titre: "Cormorant Garamond", Georgia, serif; --corps: Karla, system-ui, sans-serif; }
.t-fleurs .une .bouton { background: #F6F2E7; color: #1D3A2E; }
.t-menuis { --fond: #F7F2E9; --texte: #2E2418; --accent: #A0561B; --sur-accent: #fff; --fort: #2E2418; --sur-fort: #F7F2E9; --trait: rgba(46, 36, 24, .18); --rayon: 4px; --titre: Bitter, Georgia, serif; --corps: "Source Sans 3", system-ui, sans-serif; }
.t-cine { --fond: #140E12; --texte: #F3EBDD; --accent: #E0A82E; --sur-accent: #140E12; --clair: #E0A82E; --souligne: #E0A82E; --fort: #5E1220; --sur-fort: #F3EBDD; --trait: rgba(243, 235, 221, .2); --rayon: 3px; --titre: "Bebas Neue", Impact, sans-serif; --corps: Barlow, system-ui, sans-serif; }
.t-cine h1, .t-cine .bloc h2 { font-weight: 400; letter-spacing: .02em; }
.t-cine .marque { font-weight: 400; font-size: 1.7rem; letter-spacing: .04em; }
.t-cine .carte h3 { font-size: 1.7rem; letter-spacing: .03em; }

@media (max-width: 760px) {
  .tete nav { display: none; }
  .trois, .infos, .deux, .l-image .carte, .l-split .une, .l-split .faux-form { grid-template-columns: 1fr; }
  .l-split .une img { clip-path: none; }
}