/* BihNao — identité propre, sobre : blanc cassé, encre, accent bleu ardoise
   (la Loire, les toits nantais). Chaque produit garde ses propres couleurs
   dans sa carte : BihIA (bleu nuit, nouveau logo), memidée (crème et terracotta). */

/* Poppins (la police de BihIA) pour le nom, les titres et les liens ; Manrope
   pour les textes courants. Toutes hébergées ici (licence OFL). */
@font-face { font-family: 'Poppins'; font-weight: 300; font-display: swap; src: url(fonts/poppins-300.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-400.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(fonts/manrope-500.woff2) format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(fonts/manrope-700.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 400; font-display: swap; src: url(fonts/poppins-400.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 800; font-display: swap; src: url(fonts/poppins-800.woff2) format('woff2'); }
@font-face { font-family: 'Poppins'; font-weight: 700; font-display: swap; src: url(fonts/poppins-700.woff2) format('woff2'); }

:root {
  --fond: #ebecee;
  --surface: #ffffff;
  --encre: #1c2230;
  --doux: #4f586a;
  --pale: #7c8494;
  --ardoise: #3b5b7a;
  --ardoise-clair: #e6edf3;
  --trait: rgba(28, 34, 48, 0.1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--fond);
  color: var(--encre);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
a { color: inherit; }
/* Tous les liens dans la police de BihIA (Poppins), comme le nom BihNao. */
a { font-family: 'Poppins', system-ui, sans-serif; }
img, svg { display: block; }

.cadre { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* En-tête */
.entete { padding: 26px 0; }
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
/* Le nom : « Bih » en Poppins 800 (comme BihIA), « Nao » en Light (comme les titres). */
.marque { text-decoration: none; font-family: 'Poppins', system-ui, sans-serif; font-weight: 800; font-size: 23px; letter-spacing: -0.5px; }
.marque span { font-weight: 300; }
.nav { display: flex; gap: 26px; font-size: 14.5px; font-weight: 400; }
.nav a { text-decoration: none; color: var(--doux); }
.nav a:hover { color: var(--encre); }

/* Accueil */
.accroche { padding: 56px 0 40px; }
.accroche h1 { font-family: 'Poppins', system-ui, sans-serif; font-size: clamp(32px, 5vw, 58px); line-height: 1.15; letter-spacing: -0.5px; font-weight: 300; }
.accroche h1 em { font-style: normal; color: var(--ardoise); }
.accroche .lede { margin-top: 22px; max-width: 600px; font-size: 18px; color: var(--doux); }

/* Bandeau photo (photo de Samuel, une rue de Nantes le soir) : voile sombre
   à gauche pour que le titre reste lisible sur la partie claire. */
.haut {
  color: #fff;
  background:
    linear-gradient(100deg, rgba(8, 20, 45, 0.5) 0%, rgba(8, 20, 45, 0.2) 60%, rgba(8, 20, 45, 0) 100%),
    url(images/chateau.webp) center 0% / cover no-repeat,
    #13203a;
}
.haut .nav a { color: #fff; text-shadow: 0 1px 8px rgba(8, 14, 28, 0.55); }
.haut .marque { text-shadow: 0 1px 8px rgba(8, 14, 28, 0.45); }
.haut .nav a:hover { color: #fff; text-decoration: underline; text-underline-offset: 5px; }
.haut .accroche { padding: 80px 0 96px; text-shadow: 0 1px 14px rgba(8, 14, 28, 0.45); }
.haut .accroche h1 em { color: #f3dca6; }
.haut .accroche .lede { color: rgba(255, 255, 255, 0.86); }
.section:first-child { padding-top: 44px; }
/* Page Créations : tout tient dans l'écran d'un PC (testé à 1270 × 600),
   sans défilement. Sur téléphone, on garde le défilement naturel. */
@media (min-width: 761px) {
  /* En-tête sur une seule ligne : logo à gauche, titre au centre, menu à droite. */
  .creations .haut.court { position: relative; }
  .creations .entete { padding: 18px 0; }
  .creations .haut.court .accroche { position: absolute; top: 0; left: 0; right: 0; padding: 0; pointer-events: none; }
  .creations .haut.court .accroche .cadre { display: flex; align-items: center; justify-content: center; height: 72px; }
  .creations .haut.court .accroche h1 { font-size: 26px; line-height: 1; }
  .creations .section { padding: 34px 0 28px; }
  .creations .produits { margin-top: 0; }
  .creations .produit { min-height: 0; padding: 32px 34px 28px; }
  .creations .produit .nom { font-size: 28px; }
  .creations .produit .slogan { margin-top: 12px; }
  .creations .produit .texte { margin-top: 8px; }
  .creations .produit .lien { padding-top: 22px; }
  .creations .pied { padding: 12px 0; }
}

@media (max-width: 760px) {
  .haut { background:
    linear-gradient(180deg, rgba(8, 20, 45, 0.5) 0%, rgba(8, 20, 45, 0.3) 100%),
    url(images/chateau.webp) 58% 20% / cover no-repeat,
    #13203a; }
  .haut .accroche { padding: 40px 0 56px; }
}

/* Accueil : la photo en plein écran, rien d'autre. */
.haut.plein { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.haut.plein .accroche { flex: 1; display: flex; align-items: center; padding: 16px 0 40px; }
.haut.plein .lien-titre { display: inline-block; margin-top: 36px; font-weight: 300; font-size: 24px; letter-spacing: -0.3px; color: #f3dca6; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; }
.haut.plein .lien-titre:hover { color: #fff; }
/* Scintillement (même cycle que « Découvrir BihPulse » sur bihia.fr : un reflet
   toutes les 4 s) : il traverse uniquement les lettres et le trait de
   soulignement, sans bande autour. Le trait est un pseudo-élément (un
   dégradé ne peut pas colorer un text-decoration). Aucune animation si
   « réduire les animations » est activé. */
.haut.plein .lien-titre {
  position: relative;
  text-decoration: none;
  padding-bottom: 9px;
  text-shadow: none;
  background: linear-gradient(100deg, #f3dca6 0%, #f3dca6 34%, #ffffff 50%, #f3dca6 66%, #f3dca6 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: scintille 4s ease-in-out infinite;
}
.haut.plein .lien-titre::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(100deg, #f3dca6 0%, #f3dca6 34%, #ffffff 50%, #f3dca6 66%, #f3dca6 100%) 100% 0 / 300% 100% no-repeat;
  animation: scintille 4s ease-in-out infinite;
}
@keyframes scintille {
  0% { background-position: 100% 0; }
  28%, 100% { background-position: 0% 0; }
}
.haut.plein .lien-titre:hover { background: none; animation: none; -webkit-text-fill-color: #fff; }
.haut.plein .lien-titre:hover::after { background: #fff; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .haut.plein .lien-titre { animation: none; background: none; -webkit-text-fill-color: #f3dca6; }
  .haut.plein .lien-titre::after { animation: none; background: #f3dca6; }
}
.pied.sur-photo { text-shadow: 0 1px 8px rgba(8, 14, 28, 0.7); margin-top: 0; border-top: 0; color: rgba(255, 255, 255, 0.9); }
.pied.sur-photo a { color: rgba(255, 255, 255, 0.85); }

/* Page Produits : un bandeau photo plus court. */
.haut.court .accroche { padding: 36px 0 52px; }
.haut.court .accroche h1 { font-size: clamp(36px, 5vw, 52px); text-align: center; }
.haut.court .accroche .lede { margin-top: 12px; max-width: none; }

/* Bandeau court (Créations, Contact) : on ne garde que le ciel, à droite de la photo. */
@media (min-width: 761px) {
  .haut.court { background-size: cover, 230% auto; background-position: center, 100% 0; }
}

/* Page Créations : sous le bandeau, la même photo très floue et éclaircie. */
body.creations {
  background:
    linear-gradient(180deg, rgba(235, 236, 240, 0.55) 0%, rgba(240, 238, 234, 0.78) 45%, rgba(242, 240, 236, 0.88) 100%),
    url(images/chateau-flou.webp) center top / cover no-repeat,
    var(--fond);
}
.creations .pied { border-top-color: rgba(28, 34, 48, 0.12); }

/* Produits */
.section { padding: 32px 0 48px; }
.section h2 { font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ardoise); }
.section .intro { margin-top: 8px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 300; font-size: 22px; line-height: 1.35; color: var(--encre); }
.produits { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.produit { position: relative; display: flex; flex-direction: column; padding: 30px 30px 26px; text-decoration: none; min-height: 300px; transition: transform .2s ease, box-shadow .2s ease; }
.produit:hover { transform: translateY(-3px); }
.produit .nom { font-size: 30px; line-height: 1.1; }
.produit .slogan { margin-top: 14px; font-size: 17px; line-height: 1.45; }
.produit .texte { margin-top: 10px; font-size: 14.5px; }
.produit .lien { margin-top: auto; padding-top: 22px; font-family: 'Poppins', system-ui, sans-serif; font-size: 14.5px; font-weight: 700; }

.produit.bihia { font-family: 'Poppins', sans-serif; background: radial-gradient(60% 80% at 85% 20%, rgba(47, 125, 255, 0.28), transparent 70%), radial-gradient(50% 70% at 10% 100%, rgba(30, 80, 200, 0.22), transparent 70%), linear-gradient(135deg, #030b20 0%, #061738 55%, #0a2556 100%); color: #fff; border: 1px solid rgba(120, 170, 255, 0.22); box-shadow: 0 14px 34px rgba(3, 11, 32, 0.35); }
/* Nouveau logo BihIA (12/10) : symbole en ondes blanc + nom en Poppins 600, comme sur les bandes bleu nuit de bihia.fr. */
.produit.bihia .nom { font-weight: 600; display: flex; align-items: center; gap: 12px; letter-spacing: -0.3px; }
.produit.bihia .symbole { width: 40px; height: auto; display: block; }
.produit.bihia .slogan { color: #f3f6ff; }
.produit.bihia .texte { color: #c3cde3; }
.produit.bihia .lien { color: #6fb1ff; }

.produit.memidee { font-family: 'Manrope', system-ui, sans-serif; background: #f8efe6; color: #2b2420; border: 1px solid #ecdccd; box-shadow: 0 14px 34px rgba(160, 90, 50, 0.1); }
.produit.memidee .nom { font-weight: 400; letter-spacing: 0.12em; color: #2b2420; }
.produit.memidee .slogan { text-transform: uppercase; letter-spacing: 0.06em; font-size: 15.5px; }
.produit.memidee .slogan span { color: #b5542c; }
.produit.memidee .texte { color: #5c5048; }
.produit.memidee .lien { color: #b5542c; }
/* memidée pas encore fini (Samuel, 07/11) : petite étiquette à côté du nom. */
.produit .nom .etat { display: inline-block; vertical-align: middle; margin-left: 10px; padding: 3px 8px; border: 1px solid #b5542c; color: #b5542c; font-family: 'Manrope', system-ui, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }

/* Créations : les cartes se centrent dans l'espace entre l'en-tête et le pied. */
.creations > main:not(.contact-centre) { flex: 1; display: flex; align-items: center; }
.creations > main:not(.contact-centre) .section { width: 100%; }

/* Page Contact : un seul bloc centré, sans formulaire (aucune donnée collectée). */
.contact-centre { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; padding: 34px 0; }
.contact-titre { font-family: 'Poppins', system-ui, sans-serif; font-weight: 300; font-size: clamp(28px, 4vw, 40px); line-height: 1.2; letter-spacing: -0.3px; color: var(--encre); }
.contact-texte { margin-top: 12px; font-size: 17px; color: var(--doux); }
.contact-adresse { display: inline-block; margin-top: 26px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; font-size: clamp(20px, 3vw, 26px); color: var(--ardoise); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 8px; overflow-wrap: anywhere; }
.contact-adresse:hover { color: var(--encre); }
.contact-note { margin-top: 38px; font-size: 14.5px; color: var(--pale); }
.contact-note a { color: var(--doux); text-decoration: underline; text-underline-offset: 3px; }

/* Page Histoire : un texte, lu à son rythme (défile normalement). */
.page-histoire > main { align-items: flex-start !important; }
.histoire { max-width: 720px; padding-top: 44px; padding-bottom: 56px; }
.histoire section + section { margin-top: 38px; }
.histoire h2 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 300; font-size: 26px; letter-spacing: -0.3px; color: var(--encre); }
.histoire p { margin-top: 12px; font-size: 17px; line-height: 1.7; color: var(--doux); }
.histoire strong { color: var(--encre); }
.histoire em { font-style: italic; color: var(--encre); }
.lien-page { font-family: 'Poppins', system-ui, sans-serif; font-weight: 700; color: var(--ardoise); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.lien-page:hover { color: var(--encre); }
.a-completer { background: #fff4d6; color: #7a5a00; padding: 1px 6px; font-size: 15px; }

/* Sélecteur de langue FR · BR (comme sur le site photo de Samuel). */
.langues { display: inline-flex; gap: 10px; margin-left: 8px; padding-left: 16px; border-left: 1px solid rgba(255, 255, 255, 0.4); }
.langues button { background: none; border: 0; padding: 2px 0; font-family: 'Poppins', system-ui, sans-serif; font-size: 13px; letter-spacing: 0.14em; color: #fff; opacity: 0.6; cursor: pointer; border-bottom: 2px solid transparent; text-shadow: 0 1px 8px rgba(8, 14, 28, 0.55); }
.langues button:hover { opacity: 1; }
.langues button[aria-pressed="true"] { opacity: 1; border-bottom-color: #f3dca6; }

/* Pied de page */
.pied { margin-top: auto; border-top: 1px solid var(--trait); padding: 22px 0; font-size: 13.5px; color: var(--pale); }
.pied .cadre { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; }
.pied a { color: var(--doux); }

/* Mentions légales */
.legal { padding: 24px 0 56px; max-width: 760px; }
.legal h1 { font-family: 'Poppins', system-ui, sans-serif; font-weight: 300; font-size: 36px; letter-spacing: -0.5px; }
.legal .maj { margin-top: 4px; font-size: 13.5px; color: var(--pale); }
.legal h2 { margin-top: 30px; font-family: 'Poppins', system-ui, sans-serif; font-weight: 400; font-size: 18px; }
.legal p, .legal li { margin-top: 8px; color: var(--doux); font-size: 15px; }
.legal ul { padding-left: 20px; }
.legal .a-completer { background: #fff4d6; color: #7a5a00; padding: 1px 6px; border-radius: 6px; font-size: 14px; }

@media (max-width: 760px) {
  .cadre { padding: 0 16px; }
  .nav { gap: 8px; font-size: 12.5px; }
  .langues { gap: 6px; margin-left: 0; padding-left: 8px; }
  .langues button { font-size: 12px; letter-spacing: 0.08em; }
  .marque { font-size: 19px; }
  .entete { padding: 18px 0; }
  .nav { gap: 14px; font-size: 14px; }
  .accroche { padding: 30px 0 28px; }
  .accroche .lede { font-size: 16.5px; }
  .produits { grid-template-columns: 1fr; gap: 16px; }
  .produit { min-height: 0; padding: 24px 22px 22px; }
  .produit .nom { font-size: 26px; }
}

/* Accueil : le titre ressort mieux de la photo (la lettre N de « numériques »
   se confondait avec la tour du château) : graisse 400 au lieu de 300 et un
   halo sombre serré + un halo large derrière les lettres. */
.haut.plein .accroche h1 { font-weight: 400; text-shadow: 0 1px 2px rgba(8, 14, 28, 0.7), 0 0 10px rgba(8, 14, 28, 0.55), 0 2px 24px rgba(8, 14, 28, 0.6); }

/* Même traitement pour le lien sous le titre : graisse 400 et halo sombre.
   Le texte étant « transparent » (le reflet passe dans les lettres), le halo
   passe par filter: drop-shadow, qui suit les lettres et le trait. */
.haut.plein .lien-titre { font-weight: 400; text-shadow: none; filter: drop-shadow(0 1px 1px rgba(8, 14, 28, 0.7)) drop-shadow(0 0 8px rgba(8, 14, 28, 0.55)) drop-shadow(0 2px 18px rgba(8, 14, 28, 0.55)); }