/* ==========================================================================
   Alsace Clean Pro — landing / choix d'audience
   Écran coupé en deux : clair (professionnels) | graphite (particuliers)
   ========================================================================== */

/* Les deux colonnes partagent UNE seule grille de lignes (subgrid) : chaque
   élément d'un côté est donc sur la même ligne que son homologue de l'autre
   côté, quelle que soit la longueur des textes. Les lignes extrêmes en
   minmax() centrent le bloc tout en garantissant une marge minimale. */
.landing {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: minmax(96px, 1fr) repeat(7, auto) minmax(96px, 1fr);
  position: relative;
  overflow: clip;
  transition: grid-template-columns 620ms var(--ease-out);
}

/* Un côté s'ouvre, l'autre s'efface */
.landing:has(.panel-clear:hover),
.landing:has(.panel-clear:focus-within),
.landing:has(.panel-clear:active) { grid-template-columns: 56% 44%; }
.landing:has(.panel-cozy:hover),
.landing:has(.panel-cozy:focus-within),
.landing:has(.panel-cozy:active) { grid-template-columns: 44% 56%; }

/* ---- Panneaux ---- */
.panel {
  grid-row: 1 / -1;
  display: grid;
  grid-template-rows: subgrid;
  position: relative;
  /* clip, not hidden: `hidden` makes the panel a scroll container, and while
     it is narrow mid-transition the taller text scrolls it out of place. */
  overflow: clip;
}
.panel-clear { grid-column: 1; }
.panel-cozy { grid-column: 2; }

.panel-inner {
  grid-row: 2 / 9;
  display: grid;
  grid-template-rows: subgrid;
  width: min(440px, 100% - 12vw);
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

/* Lueur d'ambiance, dérive lente */
.panel::before {
  content: "";
  position: absolute;
  inset: -25%;
  pointer-events: none;
  animation: landingDrift 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes landingDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 2%, 0) scale(1.08); }
}

/* ---- Panneau clair (professionnels) ---- */
.panel-clear {
  /* Photo en fond, sous un voile clair. Voile allégé : sur une photo déjà très
     claire (tenue blanche, sol pâle), l'ancienne valeur ne laissait presque
     rien voir. Le texte reste sur le tiers gauche, le plus uniforme. */
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.77) 0%, rgba(246, 248, 251, 0.71) 55%, rgba(234, 240, 249, 0.75) 100%),
    /* Recadrage carré autour de l'intervenante : les photos des bandeaux sont
       très larges et, sur un panneau en hauteur, un cadrage centré ne montrait
       qu'un mur et un sol. */
    url("../img/a518dc53b5.webp") center / cover no-repeat;
  color: var(--ink);
  border-right: 1px solid rgba(226, 174, 62, 0.28);
}
.panel-clear::before {
  background:
    radial-gradient(circle at 74% 22%, rgba(74, 144, 226, 0.22), transparent 55%),
    radial-gradient(circle at 18% 86%, rgba(14, 62, 138, 0.12), transparent 52%);
}
.panel-clear h2 { color: var(--navy-900); }
.panel-clear .panel-lede { color: #2e3f57; }
.panel-clear .panel-list li { color: #3f5169; }
.panel-clear .panel-list li::before { background: linear-gradient(90deg, var(--blue-500), var(--gold-500)); }
.panel-clear .eyebrow { color: var(--blue-500); }
/* Même valeur que --text-faint : la photo qui transparaît maintenant sous ce
   texte rend le contraste d'autant plus important. */
.panel-clear .panel-foot { color: #4c5f79; border-top-color: #c9d5e6; }
.panel-clear .panel-foot a:hover { color: var(--blue-700); }
.panel-clear .panel-btn {
  background: var(--blue-700);
  color: #fff;
  box-shadow: 0 12px 34px rgba(14, 62, 138, 0.24);
}
.panel-clear .panel-btn:hover { background: var(--blue-500); box-shadow: 0 16px 40px rgba(14, 62, 138, 0.34); }

/* ---- Panneau graphite (particuliers) ---- */
.panel-cozy {
  background:
    linear-gradient(158deg, rgba(13, 15, 17, 0.88) 0%, rgba(25, 28, 31, 0.86) 58%, rgba(33, 37, 40, 0.88) 100%),
    url("../img/b56074c74b.webp") center / cover no-repeat;
  color: #e7eaec;
}
.panel-cozy::before {
  background:
    radial-gradient(circle at 24% 20%, rgba(226, 174, 62, 0.10), transparent 50%),
    radial-gradient(circle at 80% 88%, rgba(120, 78, 44, 0.12), transparent 48%);
}
.panel-cozy h2 { color: #f7f9fa; }
.panel-cozy .panel-lede { color: #c8cfd4; }
.panel-cozy .panel-list li { color: #b8c0c6; }
.panel-cozy .panel-list li::before { background: linear-gradient(90deg, #a4703f, #f0cb70); }
.panel-cozy .eyebrow { color: #e2ae3e; }
.panel-cozy .panel-foot { color: #7d868c; border-top-color: rgba(255, 255, 255, 0.13); }
.panel-cozy .panel-foot a:hover { color: #f0cb70; }
.panel-cozy .panel-btn {
  background: linear-gradient(135deg, #e2ae3e, #cd8f2a);
  color: #1a1408;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
}
.panel-cozy .panel-btn:hover {
  background: linear-gradient(135deg, #f0cb70, #e0a82e);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55), 0 0 0 4px rgba(226, 174, 62, 0.16);
}

/* Barre dégradée en pied de chaque panneau, dans sa propre gamme */
.panel-edge {
  position: absolute;
  inset: auto 0 0 0;
  height: 4px;
  z-index: 4;
}
.panel-cozy .panel-edge { background: linear-gradient(90deg, #3f2c1e 0%, #8a5f37 48%, #3f2c1e 100%); }
.panel-clear .panel-edge { background: linear-gradient(90deg, #ffffff 0%, var(--blue-500) 48%, #ffffff 100%); }

/* ---- Contenu commun ---- */
.panel h2 {
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin-top: 12px;
}
.panel .eyebrow { display: block; }
.panel-lede { font-size: 1.02rem; margin-top: 16px; max-width: 40ch; }
.panel-list { margin-top: 26px; display: grid; gap: 10px; }
.panel-list li { position: relative; padding-left: 22px; font-size: 0.93rem; }
.panel-list li::before {
  content: "";
  position: absolute; left: 0; top: 0.62em;
  width: 12px; height: 2px; border-radius: 2px;
}

/* Regroupe la liste et l'encart des aides dans une seule ligne de la subgrid. */
.panel-offre { align-self: start; }

/* ---- Encart des aides HEXA COOP (panneau particuliers) ----
   Un bloc distinct plutôt qu'une ligne de liste : les deux taux sont
   l'argument le plus fort de la page et méritent de se voir tout de suite. */
.panel-aides {
  margin-top: 22px;
  padding: 16px 18px;
  border-radius: var(--radius-sm, 12px);
  border: 1px solid rgba(226, 174, 62, 0.30);
  background: rgba(226, 174, 62, 0.07);
  max-width: 42ch;
}
.panel-aides__intro {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #e2ae3e;
  margin-bottom: 12px;
}
.panel-aides ul { display: grid; gap: 10px; }
.panel-aides li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #d5dbe0;
}
.panel-aides__taux {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: #f0cb70;
  line-height: 1;
}
.panel-aides__note { margin-top: 12px; font-size: 0.76rem; color: #8b939a; }

/* ---- Bouton ---- */
.panel-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex; align-items: center; gap: 10px;
  /* grid item : sans ça il s'étire sur toute la largeur de la colonne, et sur
     toute la hauteur de sa ligne dès que l'autre panneau est plus haut */
  justify-self: start;
  align-self: start;
  margin-top: 34px;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.93rem;
  transition: background 320ms var(--ease-out), transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out);
}
.panel-btn svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none; stroke-width: 2.2;
  transition: transform 320ms var(--ease-out);
}

/* Le bouton répond à son propre survol, pas à celui du panneau : le
   redimensionnement du panneau est un mouvement trop large pour qu'un
   décalage de 2 px s'y lise. */
.panel-btn:hover, .panel-btn:focus-visible { transform: translateY(-3px); }
.panel-btn:hover svg, .panel-btn:focus-visible svg { transform: translateX(5px); }

/* Reflet discret qui traverse le bouton une fois */
.panel-btn::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
.panel-btn:hover::after, .panel-btn:focus-visible::after {
  opacity: 1;
  animation: btnSheen 720ms var(--ease-out);
}
@keyframes btnSheen {
  from { left: -60%; }
  to   { left: 115%; }
}

.panel-foot {
  margin-top: 44px; padding-top: 18px;
  border-top: 1px solid;
  font-size: 0.8rem;
  display: flex; flex-wrap: wrap; gap: 6px 18px;
}

/* Tout le panneau est cliquable via .panel-hit. .panel-inner passe AU-DESSUS
   de cette surface (sinon elle intercepte le survol du bouton), mais reste
   transparente aux clics : seuls les vrais liens les reçoivent, le reste
   traverse jusqu'à .panel-hit. */
.panel-hit { position: absolute; inset: 0; z-index: 3; }
.panel-inner { pointer-events: none; }
.panel-foot a, .panel-btn { pointer-events: auto; }

/* ---- Signature de marque : uniquement du côté survolé ---- */
.brand-lockup {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 30px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out);
}
.panel:hover .brand-lockup,
.panel:focus-within .brand-lockup,
.panel:active .brand-lockup { opacity: 1; transform: translateY(0); }

.brand-lockup img { width: 40px; height: auto; }
.brand-lockup span {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 1.32rem;
  line-height: 1;
  white-space: nowrap;
}
.brand-lockup em { font-style: normal; color: var(--gold-500); }
/* Même jeton que le logotype de l'en-tête : le bleu de la marque, pas le navy
   presque noir des titres. Les deux ne peuvent plus diverger. */
.panel-clear .brand-lockup span { color: var(--logo-name-color); }
.panel-cozy .brand-lockup span { color: #eef1f3; }
.panel-cozy .brand-lockup em { color: #e2ae3e; }

/* ---- Raccourci vers le panneau particuliers (petits écrans) ----
   La page tient sur deux écrans depuis qu'elle affiche tout : rien ne dit au
   visiteur arrivé en haut qu'un second choix l'attend en dessous. Ce bouton le
   dit, et y descend. Il porte les couleurs du panneau graphite : on voit où il
   mène avant d'y aller.

   Déclaré AVANT la requête mobile : à spécificité égale, c'est la dernière
   règle écrite qui l'emporte, et un `display: none` placé après annulerait
   l'affichage sur téléphone. */
.vers-particuliers {
  display: none;               /* rendu visible dans la requête mobile */
  position: fixed;
  right: 16px; bottom: 16px;
  z-index: 40;
  align-items: center; gap: 8px;
  padding: 12px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  /* Blanc translucide : il flotte au-dessus des deux panneaux, il ne prend le
     parti d'aucun des deux. Pas de `backdrop-filter` : le flou brouille ce
     qu'il y a derrière au point que le bouton paraît plein, même à 70 %
     d'opacité. Sans lui, on voit vraiment la photo au travers. */
  background: rgba(255, 255, 255, 0.42);
  color: #16202a;
  font-family: var(--font-body);
  font-size: 0.88rem; font-weight: 600; text-decoration: none;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
.vers-particuliers svg {
  width: 16px; height: 16px;
  fill: none; stroke: #16202a; stroke-width: 2;
}
/* Effacé, mais retiré du parcours au clavier et du champ tactile : un bouton
   invisible qui intercepte encore les doigts est pire que pas de bouton. */
.vers-particuliers.est-cache {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  visibility: hidden;
}

/* ---- Responsive ---- */
@media (max-width: 860px) {
  /* Deux moitiés empilées, une seule colonne : plus de lignes à partager, on
     repasse en flux.

     Cette règle a longtemps imposé `height: 100svh` et des lignes de `50%`
     exactement : la page valait UN écran, ni plus ni moins. Le panneau
     particuliers porte l'encart HEXA COOP, plus haut que sa moitié sur un
     petit téléphone ; comme le contenu est centré, il débordait autant en
     haut qu'en bas, `overflow: clip` coupait les deux, et le titre
     « Particuliers » se retrouvait dans la partie coupée. Rien ne permettait
     d'aller le chercher : la page ne défilait pas.

     Désormais chaque panneau occupe la moitié de l'écran TANT QU'il y tient,
     et pousse la page au-delà dès qu'il lui faut plus. C'est ce « au-delà »
     qui manquait. */
  .landing {
    min-height: 100vh;   /* repli : navigateurs sans unités sv* */
    min-height: 100svh;
    height: auto;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(50vh, auto) minmax(50vh, auto);
    grid-template-rows: minmax(50svh, auto) minmax(50svh, auto);
    transition: none;
  }
  /* `overflow: clip` reste, des deux côtés. Il ne rognait le texte que parce
     que la ligne était plus courte que lui ; maintenant qu'elle s'étire, il ne
     retient plus que les décors (::before, .panel-edge). Le relâcher rallonge
     la page d'une bande blanche en bas et autorise un défilement latéral. */
  /* L'ouverture d'un côté au survol est une affordance de souris. Au doigt
     elle reste collée après le tap, et des lignes en pourcentage n'ont plus
     de sens sur une hauteur devenue automatique. */
  .landing:has(.panel-clear:hover),
  .landing:has(.panel-clear:focus-within),
  .landing:has(.panel-clear:active),
  .landing:has(.panel-cozy:hover),
  .landing:has(.panel-cozy:focus-within),
  .landing:has(.panel-cozy:active) {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(50svh, auto) minmax(50svh, auto);
  }

  .panel {
    grid-row: auto; grid-column: 1;
    display: flex; flex-direction: column; justify-content: center;
    padding: 32px 24px;
  }
  .panel-clear { border-right: none; border-bottom: 1px solid rgba(226, 174, 62, 0.28); }
  .panel-inner { display: block; grid-row: auto; width: min(34rem, 100%); }
  /* La liste des prestations et le pied (téléphone, secteur) étaient masqués
     ici pour tenir dans un demi-écran. La page défile maintenant : ce qui est
     écrit se lit, sur un téléphone comme ailleurs. */
  .panel-foot { margin-top: 28px; }
  .panel h2 { font-size: clamp(1.9rem, 8.5vw, 2.6rem); margin-top: 6px; }
  .panel-lede { font-size: 0.95rem; margin-top: 10px; max-width: 32ch; }
  .panel-btn { align-self: start; margin-top: 20px; padding: 12px 22px; font-size: 0.9rem; }

  /* Le raccourci n'existe que là où la page dépasse l'écran. */
  .vers-particuliers { display: inline-flex; }

  /* Pas de survol au doigt : une seule signature, sur le panneau du haut */
  .panel-clear .brand-lockup { opacity: 1; transform: none; }
  .panel-cozy .brand-lockup { display: none; }
  .brand-lockup { margin-bottom: 18px; gap: 9px; }
  .brand-lockup img { width: 30px; }
  .brand-lockup span { font-size: clamp(0.85rem, 4.4vw, 1.1rem); }
}

/* Un écran court ne justifie plus de couper le texte d'introduction : il n'y a
   plus de hauteur à tenir, la page s'allonge et se fait défiler. */

@media (prefers-reduced-motion: reduce) {
  .landing, .panel-btn, .panel-btn svg, .brand-lockup,
  .vers-particuliers { transition: none !important; }
  .vers-particuliers.est-cache { transform: none; }
  .panel-btn::after { display: none; }
  .landing:has(.panel:hover),
  .landing:has(.panel:focus-within),
  .landing:has(.panel:active) { grid-template-columns: 50% 50%; }
}