/* ================================
   DevBorea — Styles landing propres & responsives
   (Nettoyé, dédoublonné, mobile-first)
   ================================ */

/* --------- Variables & reset --------- */
:root{
  --brand:#1d3557;
  --brand-2:#2b4c7e;
  --accent:#457b9d;
  --bg:#f7f7f7;
  --card:#ffffff;
  --text:#1d3557;
  --muted:#4a5568;
  --shadow-sm:0 2px 8px rgba(0,0,0,.10);
  --radius:10px;
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  padding:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans";
  background:var(--bg);
  color:var(--text);
  text-align:center;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* --------- Layout utilitaires --------- */
.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
}

.hidden{ display:none !important; }

/* --------- Header & Footer --------- */
header,
footer{
  background:var(--brand);
  color:#fff;
}

header{
  position:sticky; top:0; z-index:40;
  border-bottom:1px solid rgba(255,255,255,.08);
}

header .bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:1em 2em;
}

header .logo{
  font-weight:800;
  letter-spacing:.2px;
}

header nav{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
}

header nav a{
  color:#fff;
  text-decoration:none;
  background:var(--accent);
  padding:.5em 1em;
  border-radius:6px;
  font-weight:600;
  transition:opacity .15s ease, transform .12s ease;
}
header nav a:hover{ opacity:.92; }
header nav a:active{ transform:translateY(1px); }

footer{
  padding:1.25em;
  font-size:.95rem;
}

/* --------- Main --------- */
main{ padding: clamp(1.25rem, 1rem + 1vw, 2rem); }

/* --------- Boutons --------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  margin: 1em .5em;
  padding:.7em 1.5em;
  background:var(--brand);
  color:#fff;
  text-decoration:none;
  border-radius:8px;
  font-weight:700;
  transition: opacity .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
}
.btn:hover{ background:var(--brand-2); }
.btn:active{ transform:translateY(1px); }

/* Variantes si besoin */
.btn--light{
  background:#fff; color:var(--brand);
  border:2px solid var(--brand);
}
.btn--ghost{
  background:transparent; color:#fff;
  border:2px solid #fff;
}

/* --------- Grille des modèles --------- */
/* (Une seule définition, responsive) */
.modeles{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2em;
  margin-top: 2em;
  padding: 0;
}

.modele-card{
  background:var(--card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1em;
  text-align: center;
  width:100%;                 /* laisse la grille contrôler la largeur */
  max-width: 320px;           /* limite agréable sur grands écrans */
  margin-inline:auto;
}

.modele-card img{
  width:100%;
  height:auto;
  display:block;
  border-radius:6px;
  margin-bottom:.75em;
}

.modele-card h3{
  margin:.25em 0 .4em;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color:var(--text);
}

.modele-card p{
  margin:0;
  color:var(--muted);
  font-size:.95rem;
}

/* --------- Formulaire --------- */
form{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  margin-top: 2em;
}

form input[type="text"],
form input[type="color"],
form select{
  width: 100%;
  max-width: 320px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  background:#fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

form button{
  padding: 12px 24px;
  background: var(--brand);
  border: none;
  color: white;
  font-size: 1rem;
  font-weight:700;
  border-radius: 6px;
  cursor: pointer;
  transition: opacity .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: var(--shadow-sm);
}
form button:hover{ background: #16324f; }
form button:active{ transform:translateY(1px); }

/* --------- Typo responsive --------- */
h1{ font-size: clamp(1.6rem, 1.3rem + 1.8vw, 2.4rem); margin:.2em 0 .4em; }
h2{ font-size: clamp(1.3rem, 1.1rem + 1.2vw, 1.8rem); margin:.2em 0 .4em; }
h3{ font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem); }

/* --------- Media queries --------- */
@media (max-width: 900px){
  header .bar{ padding: .9em 1.2em; }
  header nav{ gap:.5rem; }
}

@media (max-width: 600px){
  .modele-card{ padding:.9em; }
  .btn{ margin:.8em .4em; }
}

/* Accessibilité: réduit les animations si demandé */
@media (prefers-reduced-motion: reduce){
  *{ transition-duration:.001ms !important; animation-duration:.001ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}