/* ============================================================
   ARGANE \002014 Page Recherche
   Recherche \0000e9ditoriale moderne, plein \0000e9cran centr\0000e9
   ============================================================ */

:root{
  --forge:#081F2C;
  --acier:#253746;
  --ardoise:#57728B;
  --braise:#EE2737;
  --paper:#FAFAFA;
  --ink-08:rgba(250,250,250,0.08);
  --ink-15:rgba(250,250,250,0.15);
  --paper-60:rgba(250,250,250,0.60);

  --ff-display:"Space Grotesk", sans-serif;
  --ff-body:"DM Sans", sans-serif;
  --ff-mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0; padding:0; height:100%;}
html{background:var(--forge);}
body{
  background:var(--forge);
  color:var(--paper);
  font-family:var(--ff-body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
img,svg{display:block; max-width:100%;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0;}
:focus-visible{outline:2px solid var(--braise); outline-offset:3px; border-radius:2px;}

/* Grille technique de fond, tr\0000e8s subtile */
body::before{
  content:"";
  position:fixed;
  inset:0;
  /* grille de fond retir\0000e9e */
  pointer-events:none;
  z-index:0;
}

/* Halo Braise tr\0000e8s diffus au centre */
body::after{
  content:"";
  position:fixed;
  inset:0;
  background:radial-gradient(60% 50% at 50% 40%, rgba(238,39,55,0.10) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
}

/* ============================================================
   Layout principal
   ============================================================ */
.page{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-rows:auto 1fr auto;
  min-height:100vh;
  padding:clamp(20px, 3vw, 40px) clamp(24px, 5vw, 64px);
}

/* ----- Header ----- */
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
}
.logo-mark{display:inline-flex; align-items:center;}
.logo-mark img{height:44px; width:auto;}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--ff-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--paper);
  padding:8px 0;
  transition:color .2s ease;
}
.back-link:hover{color:var(--braise);}
.back-link .x{
  width:24px; height:24px;
  position:relative;
}
.back-link .x::before,
.back-link .x::after{
  content:"";
  position:absolute;
  left:1px; right:1px; top:50%;
  height:1.5px;
  background:currentColor;
}
.back-link .x::before{transform:rotate(45deg);}
.back-link .x::after{transform:rotate(-45deg);}

/* ----- Section centrale ----- */
.page-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--sp-section) 0 clamp(40px, 5vw, 80px);
  gap:clamp(40px, 5vw, 64px);
}

.eyebrow{
  font-family:var(--ff-display);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ardoise);
  display:inline-flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before,
.eyebrow::after{
  content:"";
  width:40px; height:1px;
  background:var(--ardoise);
}

h1{
  font-family:var(--ff-display);
  font-weight:400;
  letter-spacing:-0.04em;
  line-height:0.96;
  font-size:var(--fs-display);
  margin:0;
  color:var(--paper);
  text-wrap:balance;
  max-width:18ch;
}
h1 em{
  font-family:var(--ff-body);
  font-style:italic;
  font-weight:300;
  color:var(--braise);
  letter-spacing:-0.01em;
}

/* ----- Champ recherche ----- */
.search-field{
  width:100%;
  max-width:760px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.search-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:18px 0;
  border-bottom:2px solid rgba(250,250,250,0.18);
  transition:border-color .25s ease;
}
.search-row:focus-within{border-bottom-color:var(--braise);}
.search-icon{
  width:28px; height:28px;
  color:rgba(250,250,250,0.40);
  transition:color .25s ease;
}
.search-row:focus-within .search-icon{color:var(--paper);}
.search-input{
  background:transparent;
  border:0;
  outline:0;
  width:100%;
  min-width:0;
  font-family:var(--ff-display);
  font-weight:400;
  font-size:clamp(24px, 3vw, 38px);
  letter-spacing:-0.025em;
  color:var(--paper);
  padding:8px 0;
  caret-color:var(--braise);
}
.search-input::placeholder{
  color:rgba(250,250,250,0.28);
  font-style:italic;
  font-weight:300;
}
.search-input::-webkit-search-cancel-button{
  -webkit-appearance:none; appearance:none;
  width:18px; height:18px;
  background:url(data:image/svg+xml;utf8,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2012%2012%27%3E%3Cpath%20d=%27M2%202l8%208M10%202l-8%208%27%20stroke=%27%23F4F1EA%27%20stroke-width=%271.2%27%20stroke-linecap=%27round%27/%3E%3C/svg%3E) center/contain no-repeat;
  opacity:0.5; cursor:pointer;
}
.search-input::-webkit-search-cancel-button:hover{opacity:1;}
/* Le bouton utilise le composant partagé .btn.btn-primary (argane-buttons.css) :
   pas de style propre ici, seulement le hook de mise en page. */
.search-submit{flex:0 0 auto;}

.search-hint{
  font-family:var(--ff-body);
  font-style:italic;
  font-weight:300;
  font-size:13px;
  color:rgba(250,250,250,0.45);
  text-align:left;
  padding-left:44px; /* align\0000e9 apr\0000e8s l'ic\0000f4ne */
}
.search-hint kbd{
  display:inline-block;
  font-family:var(--ff-display);
  font-style:normal;
  font-weight:500;
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  padding:3px 8px;
  margin:0 4px;
  border:1px solid rgba(250,250,250,0.20);
  border-radius:4px;
  color:rgba(250,250,250,0.70);
}

/* ----- Suggestions ----- */
.suggestions{
  width:100%;
  max-width:880px;
  margin-top:8px;
}
.sugg-label{
  font-family:var(--ff-display);
  font-size:11px;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--ardoise);
  margin-bottom:18px;
  display:block;
}
.sugg-list{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
}
.sugg-list a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:11px 20px;
  font-family:var(--ff-display);
  font-size:13px;
  font-weight:500;
  letter-spacing:0.04em;
  color:var(--paper);
  background:transparent;
  border:1.5px solid rgba(250,250,250,0.18);
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.sugg-list a:hover{
  background:rgba(250,250,250,0.06);
  border-color:var(--paper);
  transform:translateY(-1px);
}
.sugg-list a .ref{
  font-family:var(--ff-display);
  font-size:11px;
  color:var(--ardoise);
  letter-spacing:0.10em;
  text-transform:uppercase;
}

/* ----- Section "Parcourir par famille" ----- */
.browse{
  width:100%;
  max-width:1100px;
  margin-top:clamp(48px, 6vw, 80px);
  padding-top:clamp(48px, 6vw, 80px);
  border-top:1px solid rgba(250,250,250,0.08);
}
.browse-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:32px;
  gap:32px;
  text-align:left;
}
.browse-head h2{
  font-family:var(--ff-display);
  font-weight:500;
  font-size:var(--fs-h2);
  line-height:0.98;
  letter-spacing:-0.035em;
  margin:0;
}
.browse-head h2 em{font-style:normal;}
.browse-grid{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
}
.browse-card{
  display:flex;
  flex-direction:column;
  text-align:left;
  padding:20px;
  background:rgba(250,250,250,0.03);
  border:1px solid rgba(250,250,250,0.08);
  border-radius:10px;
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.browse-card:hover{
  background:rgba(250,250,250,0.06);
  border-color:rgba(250,250,250,0.20);
  transform:translateY(-3px);
}
.browse-card .num{
  font-family:var(--ff-display);
  font-size:10px;
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--braise);
  margin-bottom:14px;
}
.browse-card h3{
  font-family:var(--ff-display);
  font-size:16px;
  font-weight:500;
  letter-spacing:-0.01em;
  margin:0 0 8px;
  color:var(--paper);
}
.browse-card p{
  font-family:var(--ff-body);
  font-size:12px;
  line-height:1.45;
  color:rgba(250,250,250,0.55);
  margin:0;
}

/* ----- Footer minimal ----- */
.page-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-top:clamp(32px, 4vw, 48px);
  gap:24px;
  font-family:var(--ff-body);
  font-size:12px;
  color:rgba(250,250,250,0.45);
  flex-wrap:wrap;
}
.page-foot .signature{
  font-family:var(--ff-display);
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  font-size:11px;
  color:rgba(250,250,250,0.55);
}

/* Animation d'entr\0000e9e */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(20px);}
  to{opacity:1; transform:translateY(0);}
}
.eyebrow{animation:fadeUp .6s ease-out 0.1s both;}
h1{animation:fadeUp .6s ease-out 0.2s both;}
.search-field{animation:fadeUp .6s ease-out 0.35s both;}
.suggestions{animation:fadeUp .6s ease-out 0.5s both;}
.browse{animation:fadeUp .6s ease-out 0.65s both;}

@media (prefers-reduced-motion: reduce){
  .eyebrow, h1, .search-field, .suggestions, .browse{animation:none;}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1024px){
  .browse-grid{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:768px){
  .page{padding:20px 20px 32px;}
  .logo-mark img{height:34px;}
  .back-link span.label{display:none;}
  h1{font-size:clamp(40px, 12vw, 64px);}
  .search-input{font-size:22px;}
  /* Champ pleine largeur : le bouton passe sous la ligne de saisie */
  .search-row{grid-template-columns:auto 1fr; gap:10px 12px;}
  .search-submit{grid-column:1 / -1; width:100%; padding:13px 16px; font-size:11px;}
  .search-hint{padding-left:0; text-align:center;}
  .browse-head{flex-direction:column; align-items:flex-start; gap:12px;}
  .browse-grid{grid-template-columns:1fr;}
  .eyebrow::before, .eyebrow::after{width:20px;}
  .sugg-list{justify-content:flex-start;}
  .page-foot{flex-direction:column; align-items:flex-start;}
}