/* Ajustements pour téléphone et tablette, communs à toutes les pages.
   Ils ne changent rien au design sur ordinateur (au-dessus de 1024 px).
   Objectifs : aucun défilement horizontal, aucun élément coupé, cibles tactiles d'au moins 44 px. */

/* Une colonne de grille ne doit jamais être élargie par son contenu (cause d'un débordement sur la page Contact) */
.contact-grid > *{min-width:0;}
/* les champs à compléter (longs) passent à la ligne au lieu de pousser la page en largeur */
.to-fill{white-space:normal;-webkit-box-decoration-break:clone;box-decoration-break:clone;}
img,svg,video{max-width:100%;}

@media (max-width:1024px){
  /* la barre garde sa hauteur d'origine malgré les liens de 44 px */
  nav{padding:.5rem 0;}
  nav.solid{padding:.4rem 0;}
  .nav-links a{display:inline-flex;align-items:center;min-height:44px;padding-bottom:0;}
  .footer-col a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;}
  .btn-outline{display:inline-flex;align-items:center;min-height:44px;}
  .cookie-btn{min-height:44px;}
  .submit-btn,.add-btn,.filter-btn{min-height:44px;}
}

@media (max-width:640px){
  /* menu : tient en une ligne sur un téléphone de 360 px de large */
  .nav-links{gap:1rem;}
  .nav-links a{font-size:.72rem;letter-spacing:.1em;}
  /* pied de page : colonnes empilées lisibles */
  .footer-cols{gap:1.8rem 2.5rem;}
  /* bandeau cookies : bouton pleine largeur, facile à toucher du pouce */
  .cookie-banner-inner{padding:1rem 1.25rem;}
  .cookie-banner-actions .cookie-btn{width:100%;}
}

/* Tablette : le bouton du menu (sur la page boutique / « Voir la cave ») devient une cible de 44 px */
@media (min-width:641px) and (max-width:1024px){
  .nav-cta{display:inline-flex;align-items:center;min-height:44px;}
}

/* Téléphone : le bandeau cookies ne doit pas occuper la moitié de l'écran.
   (Dans le design d'origine, « flex:1 1 420px » devenait une HAUTEUR de 420 px une fois les éléments empilés.) */
@media (max-width:640px){
  .cookie-banner-inner p{flex:0 0 auto;}
  .cookie-banner-inner{gap:.9rem;}
}
/* Petits téléphones : les titres de page (« Conditions »+« GÉNÉRALES DE VENTE ») ne doivent pas dépasser l'écran */
@media (max-width:480px){
  .page-header h1{font-size:1.7rem;overflow-wrap:anywhere;}
  .page-header h1 .script{display:block;line-height:1.1;}
}

/* Ordinateur : le trait rouge sous la page courante du menu est plus épais et un peu plus bas,
   pour être aussi visible que sur téléphone (où le lien fait 44 px de haut). */
@media (min-width:1025px){
  .nav-links a{display:inline-block;padding-bottom:.6rem;border-bottom-width:4px;}
  .nav-links{overflow:visible;}
  .nav-links a.current,
  .nav-links a:hover,
  .nav-links a:focus-visible{border-bottom-color:var(--wine-line,#a4384a);}
}

/* ---------- Logo (armoiries aux deux angelots) dans l'en-tête de toutes les pages, à gauche, devant le menu ---------- */
.nav-logo{display:flex;align-items:center;flex:0 0 auto;margin-right:.4rem;}
.nav-logo img{display:block;height:46px;width:auto;opacity:.95;transition:opacity .2s;}
.nav-logo:hover img,.nav-logo:focus-visible img{opacity:1;}
.nav-logo + .nav-links{margin-right:auto;}
@media (max-width:640px){
  .nav-logo img{height:36px;}
  /* Toutes les pages sur téléphone : le logo (et le bouton, s'il y en a un) sur la première ligne, le menu dessous,
     pour que les quatre liens restent visibles sans faire défiler. */
  .nav-inner{flex-wrap:wrap;row-gap:0;}
  .nav-logo{order:0;}
  .nav-inner .nav-cta{order:1;margin-left:auto;}
  .nav-inner .nav-links{order:2;flex:1 1 100%;margin-right:0;}
  .nav-inner:has(#cartBtn) #cartBtn.nav-cta{order:1;margin-left:auto;}
  /* le haut de page descend un peu pour ne pas passer sous la barre à deux lignes */
  .page-header{padding-top:7rem;}
}

/* ---------- Téléphone et tablette (jusqu'à 900 px) : lisibilité et cibles tactiles ---------- */
@media (max-width:900px){
  /* petits textes en majuscules : jamais en dessous de 11,5 px */
  .eyebrow,.info-eyebrow,.pratique-eyebrow,.vb-eyebrow,.product-badge,.product-appellation,.flip-aide,
  .frise-annee,.cta-drawing-btn,.visite-drawing-btn,.btn-outline{font-size:max(.72rem,11.5px);}
  /* coordonnées de la page Contact : zone de toucher d'au moins 44 px */
  .info-block a{display:inline-flex;align-items:center;min-height:44px;}
  /* case à cocher du formulaire : plus grande, et lien de la politique facile à toucher */
  .field-check input[type=checkbox]{width:22px;height:22px;min-width:22px;margin-top:.1rem;accent-color:var(--wine-bright,#8c2635);}
  .field-check a{display:inline-block;padding:.45rem 0;}
  /* crédit du pied de page */
  footer a[href^="https://www.lucileg.fr"]{display:inline-block;padding:.7rem .3rem;}
}
/* « Nos vins » (accueil) : cartes moins hautes sur téléphone, la pile reste courte */
@media (max-width:900px){
  .cave .product-flip{height:400px;}
}

/* « Le domaine » ne se coupe jamais sur deux lignes dans le menu (tablette) */
.nav-links a{white-space:nowrap;}
@media (max-width:1024px) and (min-width:641px){
  .nav-links{gap:1.4rem;}
}

/* Boutique sur téléphone : le bouton « Panier » reste sur la première ligne, à côté du logo (la barre est moins haute) */
@media (max-width:640px){
  .nav-inner:has(#cartBtn) .nav-links{order:2;flex:1 1 100%;}
  .nav-inner:has(#cartBtn) #cartBtn.nav-cta{order:1;margin-left:auto;}
}

/* Pied de page (ordinateur et tablette large) : « Domaine des Vignes du Paradis » est remonté au-dessus du bloc, pour que
   « Pascal Durand… » soit à la hauteur des titres des colonnes (« Le domaine », « Boutique »…). */
@media (min-width:701px){
  .footer-grid{align-items:baseline;}
  .footer-grid > div:first-child{position:relative;}
  .footer-grid .footer-mark{position:absolute;left:0;bottom:100%;margin:0 0 .7rem;white-space:nowrap;}
}

/* Pied de page : informations légales sur une seule ligne (au-dessus du copyright) ; Instagram et Facebook sur une ligne, avec leurs logos */
.footer-bottom .footer-legal{flex:1 1 100%;display:flex;flex-wrap:wrap;gap:.1rem 1.7rem;margin:0 0 .5rem;}
.footer-legal a{display:inline-flex;align-items:center;min-height:34px;font-size:.82rem;color:rgba(233,223,196,.78);text-decoration:none;}
.footer-legal a:hover,.footer-legal a:focus-visible{color:var(--wine-line,#a4384a);text-decoration:underline;}
.footer-col .footer-social{display:flex;flex-wrap:wrap;gap:.2rem 1.2rem;}
.footer-social a{display:inline-flex;align-items:center;gap:.45rem;}
.ico-social{width:17px;height:17px;flex:none;}
@media (max-width:900px){
  .footer-legal a{min-height:44px;}
}
/* pied de page plus compact */
.footer-bottom{margin-top:1.7rem;padding-top:1rem;}

/* Bandeau noir des pages Le Domaine, Boutique et Contact : plus bas, et de la même hauteur sur les trois pages */
.page-header{padding:84px 0 1.7rem;}
.page-header h1{font-size:clamp(2rem,3.9vw,2.9rem);margin-top:.6rem;}
.page-header p{margin-top:.8rem;line-height:1.6;max-width:80ch;}
@media (max-width:640px){
  .page-header{padding:7rem 0 1.4rem;}
  .page-header h1{font-size:clamp(1.9rem,8vw,2.4rem);}
}
@media (min-width:641px){
  .page-header{min-height:288px;}   /* les trois pages ont exactement la même hauteur de bandeau */
}

/* Bandeau des pages Le Domaine, Boutique et Contact : noir jusqu'au titre, puis la phrase sur une barre noire
   que traverse lentement un reflet rouge (comme un éclat de lumière dans le vin). */
.page-header.page-header--split{padding:0 !important;min-height:0;overflow:visible;background:var(--black);}
.page-header--split::after{display:none;}
.page-header--split .page-header-haut{padding:84px 0 1.1rem;}
.page-header--split h1{margin-top:.5rem;}
.page-header--split .page-header-bas{position:relative;overflow:hidden;padding:.9rem 0 1.4rem;}
.page-header--split .page-header-bas .page-header-inner{position:relative;z-index:1;}
.page-header--split .page-header-bas p{margin:0 auto;max-width:80ch;line-height:1.6;color:rgba(233,223,196,.9);}
.page-header--split .page-header-bas::before{
  content:"";position:absolute;left:0;top:4%;bottom:4%;width:80%;   /* ne touche ni le haut ni le bas de la barre */
  background:radial-gradient(ellipse 50% 50% at 50% 50%,rgba(164,56,74,.8) 0%,rgba(140,38,53,.45) 40%,transparent 98%);
  filter:blur(6px);
  transform:translateX(-100%);
  animation:bandeau-reflet 8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes bandeau-reflet{
  0%{transform:translateX(-100%);opacity:0;}
  10%{opacity:1;}
  72%{opacity:1;}
  92%,100%{transform:translateX(145%);opacity:0;}
}
@media (max-width:640px){
  .page-header--split .page-header-haut{padding:7rem 0 .9rem;}
}
@media (prefers-reduced-motion:reduce){
  .page-header--split .page-header-bas::before{animation:none;transform:translateX(15%);opacity:.8;}
}