/* ============================================================
   PureSpec - base.css
   ------------------------------------------------------------
   SOCLE COMMUN A TOUTES LES PAGES. Chargé en PREMIER, partout.

   Avant ce fichier, l'accueil (home.css) et les autres pages
   (shared.css) redéfinissaient chacune de leur côté la barre de
   navigation, le menu, le pied de page, le toast et l'anneau de
   focus. 69 sélecteurs étaient dupliqués à l'identique et 29
   avaient divergé : toast en pastille ici et en rectangle là,
   nav à z-index 40 d'un côté et 50 de l'autre, transitions de
   0,2 s et de 0,25 s pour le même lien.

   Ces composants n'existent plus qu'ici. home.css ne contient
   plus que ce qui est propre à l'accueil, shared.css que ce qui
   est propre aux pages internes.
   ============================================================ */

:root {
  /* --- Grille : une seule largeur de contenu, une seule gouttière ---
     Avant : 1180 (nav), 1200 (story/pied), 1240 (hero), 820, 860…
     Le bord gauche du contenu se déplaçait à chaque section. */
  --container: 1200px;
  --gutter: 24px;

  /* Le carrousel de cartes est la seule exception assumée : il doit
     déborder du conteneur, c'est son principe. */
  --container-wide: 1480px;

  /* Seuil unique bureau / mobile. Avant, le menu basculait à 900 px
     et le configurateur à 1024 px : entre les deux, le site était
     dans un état hybride (menu bureau + configurateur mobile). */
}

@media (max-width: 768px) {
  :root { --gutter: 20px; }
}

/* ------------------------------------------------------------
   RESET
   ------------------------------------------------------------ */
:root { color-scheme: light; }
html { color-scheme: light; scroll-behavior: smooth; }
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--c-bg, #f5f5f7);
  color: var(--c-ink, #1d1d1f);
  letter-spacing: -0.01em;
}

/* flex-basis auto : le contenu garde sa hauteur naturelle, main se
   contente de pousser le pied de page vers le bas. */
main { flex: 1 0 auto; min-width: 0; }
.footer { margin-top: auto; }
.nav-spacer { flex-shrink: 0; }

img, video { max-width: 100%; }

/* Chiffres à chasse fixe : sans ça « 24,90 € » et « 3,49 € » ne
   s'alignent pas dans un récapitulatif. */
.font-mono {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------
   GRILLE : utilitaires de colonnes
   ------------------------------------------------------------
   minmax(0, 1fr) et non 1fr : sans le minmax, une cellule
   contenant un texte insécable long (référence de commande,
   adresse e-mail) fait déborder toute la grille.
   ------------------------------------------------------------ */
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------------------
   PAGES DE TEXTE (CGV, mentions légales, notice)
   ------------------------------------------------------------
   Ces règles vivaient en triple, recopiées dans un <style> en
   ligne dans cgv.html, legal.html et notice.html. Le bloc
   contenait deux fois « .legal-section h2 » : la seconde
   déclaration écrasait la première, et TOUS les titres de
   section s'affichaient en 16 px semi-gras, à peine plus gros
   que le corps de texte à 14 px. Les pages n'avaient donc
   aucune hiérarchie visuelle.
   ------------------------------------------------------------ */
.legal-section {
  max-width: 820px;
  margin: 0 auto;
  /* Une colonne de texte a besoin de plus d'air sur les cotes qu'une
     grille : sous 640 px, 20 px de gouttiere collaient le texte au bord. */
  padding: 48px clamp(28px, 6vw, 48px) 96px;
}
.legal-section h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--track-title, -0.032em);
  color: var(--c-ink, #1d1d1f);
  margin: 44px 0 12px;
}
.legal-section h2:first-of-type { margin-top: 0; }
.legal-section h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-ink, #1d1d1f);
  margin: 28px 0 8px;
}
.legal-section p,
.legal-section li {
  color: var(--c-gray, #6e6e73);
  line-height: 1.65;
  font-size: 15px;
  margin: 8px 0;
}
.legal-section ul { padding-left: 22px; list-style: disc; }
.legal-block {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: var(--r-lg, 18px);
  padding: 18px 22px;
  margin: 16px 0 8px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-gray, #6e6e73);
}
.legal-block strong { color: var(--c-ink, #1d1d1f); }

/* ===== NAVBAR - rectangle flottant arrondi ===== */
.nav-blur {
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(255,255,255,0.95);
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  /* Geometrie d'origine conservee : le bandeau flottant est volontairement
     plus large que la colonne de contenu et colle davantage aux bords.
     L'aligner sur --container / --gutter le retrecissait nettement,
     surtout sur telephone (10 px d'inset devenus 20). */
  width: calc(100% - 32px);
  max-width: 1180px;
  z-index: var(--z-nav, 50);
  border: 1px solid rgba(0,0,0,0.07);
  border-radius:var(--r-md, 12px);
  box-shadow: 0 1px 3px rgba(0,0,0,.03),0 6px 20px rgba(0,0,0,.03);
}
/* Reste figée et visible (pas d'auto-masquage au défilement) */
.nav-blur.nav-hidden { transform: translateX(-50%); }
.nav-spacer { height: 88px; flex-shrink: 0; }

/* 3 zones : gauche = Menu, centre = Brand, droite = actions */
.nav-inner, .nav-row {
  max-width: 1480px;
  margin:0 auto;
  padding:0 20px;
  height: 58px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap:16px;
}
@media (max-width: 768px) {
  .nav-blur { top: 10px; width: calc(100% - 20px); }
  .nav-inner, .nav-row { padding:0 12px; height: 54px; }
  .nav-spacer { height: 76px; }
  /* Resserre l'espace entre la nav et le contenu du hero des pages secondaires. */
  .page-hero { padding-top:28px; }
}

.nav-left { display: flex; align-items: center; justify-content: flex-start; }
.nav-brand-link {
  font-weight: 700; font-size: 17px; color: var(--c-ink); text-decoration: none;
  letter-spacing: -0.02em; display: inline-flex; align-items: center;
}

.nav-center { display: flex; align-items: center; justify-content: center; }
.nav-right { display: flex; align-items: center; justify-content: flex-end; gap:8px; }

/* Bouton Menu (icône + texte) */
.nav-menu-btn {
  display: inline-flex;
  align-items: center;
  gap:8px;
  padding:8px 12px 8px 12px;
  border-radius:var(--r-md, 12px);
  background: transparent;
  color: var(--c-ink);
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: background var(--t-fast);
}
.nav-menu-btn:hover { background: var(--c-bg); }
.nav-menu-btn svg { display: block; }


/* Bouton CTA "Concevoir" rectangulaire arrondi noir */
.nav-cta {
  background: var(--c-ink);
  color: #fff;
  padding:8px 16px;
  border-radius:var(--r-md, 12px);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: background var(--t-fast);
  display: inline-flex;
  align-items: center;
  gap:8px;
}
.nav-cta svg { width: 12px; height: 12px; }
.nav-cta:hover { background: #000; }

/* Avatar "Z" carré arrondi noir */
.nav-account {
  width: 34px; height: 34px;
  border-radius:var(--r-sm, 8px);
  background: var(--c-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  transition: background var(--t-fast);
  text-decoration: none;
}
.nav-account:hover { background: #000; }

/* Switch langue */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 6px;
  background: transparent;
  border: 0;
  color: var(--c-ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: opacity var(--t-fast) var(--ease-apple);
}
.lang-switch:hover { opacity: 0.55; background: transparent; }

/* Mobile : cacher labels */
@media (max-width: 520px) {
  .nav-cta span { display: none; }
  .nav-cta { padding:8px 12px; }
  .nav-menu-btn span { display: none; }
  .nav-menu-btn { padding:8px 8px; }
}

/* Anciens éléments cachés */

.nav-mobile-menu {
  position: fixed;
  z-index: var(--z-overlay, 100);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s var(--ease-apple), transform 0.28s var(--ease-apple);
  display: flex;
  flex-direction: column;
}
/* Mobile : plein écran (style Apple / Porsche) */
@media (max-width: 1023px) {
  .nav-mobile-menu {
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    transform: translateY(-6px);
  }
  .nav-mobile-menu.open { transform: translateY(0); }
}
/* Desktop : dropdown arrondi, juste la taille nécessaire */
@media (min-width: 1024px) {
  .nav-mobile-menu {
    top: 84px;
    left: max(24px, calc(50% - 582px));
    transform: translateY(-8px);
    width: 320px; max-width: calc(100% - 48px);
    background: rgba(255,255,255,0.97);
    backdrop-filter: saturate(180%) blur(24px);
    -webkit-backdrop-filter: saturate(180%) blur(24px);
    border: 1px solid rgba(0,0,0,0.08);
    border-radius:var(--r-lg, 18px);
    box-shadow: 0 6px 28px rgba(0,0,0,.07);
    padding:8px;
  }
  .nav-mobile-menu.open { transform: translateY(0); }
}
.nav-mobile-menu.open { opacity: 1; pointer-events: auto; }

/* Header (croix de fermeture) : seulement en plein écran mobile, sans logo */
.nav-mobile-head { display: flex; align-items: center; justify-content: flex-start; }
@media (max-width: 1023px) {
  .nav-mobile-head { height: 60px; padding:0 16px; border-bottom: 1px solid rgba(0,0,0,0.06); }
}
@media (min-width: 1024px) { .nav-mobile-head { display: none; } }

.nav-mobile-body { display: flex; flex-direction: column; }
@media (max-width: 1023px) { .nav-mobile-body { flex: 1; padding:20px; gap:2px; } }
@media (min-width: 1024px) { .nav-mobile-body { padding:8px; gap:2px; } }

.nav-mobile-link {
  display: block; width: 100%; text-align: left;
  background: none; border: none; cursor: pointer; font: inherit;
  color: var(--c-ink); text-decoration: none;
  border-radius:var(--r-md, 12px);
  transition: background 0.15s ease;
}
@media (max-width: 1023px) { .nav-mobile-link { padding:16px 8px; font-size: 24px; font-weight: 600; letter-spacing: -0.02em; } }
@media (min-width: 1024px) { .nav-mobile-link { padding:12px 12px; font-size: 15px; font-weight: 500; } .nav-mobile-link:hover { background: rgba(0,0,0,0.05); } }

/* Premier item : CTA noir "Concevoir le mien" */
.nav-mobile-cta {
  display: block; text-align: center;
  background: var(--c-ink); color: #fff; text-decoration: none;
  border-radius:var(--r-md, 12px); font-weight: 600; letter-spacing: -0.01em;
  transition: background 0.15s ease;
}
@media (max-width: 1023px) { .nav-mobile-cta { padding:16px; font-size: 17px; margin-bottom:12px; } }
@media (min-width: 1024px) { .nav-mobile-cta { padding:12px; font-size: 15px; margin-bottom:8px; } }
.nav-mobile-cta:hover { background: #000; }

.nav-mobile-lang { color: rgba(29,29,31,0.6); }
@media (max-width: 1023px) { .nav-mobile-lang { font-size: 17px !important; font-weight: 500 !important; } }
@media (min-width: 1024px) { .nav-mobile-lang { font-size: 14px !important; } }

/* Mon compte en bas, avec avatar */
.nav-mobile-account {
  display: flex; align-items: center; gap:12px;
  text-decoration: none; color: var(--c-ink);
  border-top: 1px solid rgba(0,0,0,0.07);
}
@media (max-width: 1023px) { .nav-mobile-account { padding:20px 20px 30px; font-size: 17px; font-weight: 600; } }
@media (min-width: 1024px) { .nav-mobile-account { margin-top:4px; padding:12px 12px; border-radius:var(--r-md, 12px); font-size: 15px; font-weight: 500; } .nav-mobile-account:hover { background: rgba(0,0,0,0.05); } }
.nav-mobile-avatar {
  width: 38px; height: 38px; border-radius:var(--r-md, 12px);
  background: var(--c-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
@media (min-width: 1024px) { .nav-mobile-avatar { width: 30px; height: 30px; border-radius:var(--r-sm, 8px); } .nav-mobile-avatar svg { width: 16px; height: 16px; } }

/* Apparition en fondu décalée (un item après l'autre) */
.nav-mobile-cta, .nav-mobile-body .nav-mobile-link, .nav-mobile-account { opacity: 0; }
.nav-mobile-menu.open .nav-mobile-cta,
.nav-mobile-menu.open .nav-mobile-body .nav-mobile-link,
.nav-mobile-menu.open .nav-mobile-account {
  animation: navItemFade 0.5s var(--ease-apple) forwards;
}
.nav-mobile-menu.open .nav-mobile-body > *:nth-child(1) { animation-delay: 0.05s; }
.nav-mobile-menu.open .nav-mobile-body > *:nth-child(2) { animation-delay: 0.11s; }
.nav-mobile-menu.open .nav-mobile-body > *:nth-child(3) { animation-delay: 0.17s; }
.nav-mobile-menu.open .nav-mobile-body > *:nth-child(4) { animation-delay: 0.23s; }
.nav-mobile-menu.open .nav-mobile-account { animation-delay: 0.29s; }
@keyframes navItemFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

body.nav-locked { overflow: hidden; }

/* Côté barre : le CTA "Concevoir" de la barre est masqué en mobile */
@media (max-width: 1023px) {
  .nav-cta { display: none; }
}

/* ===== FOOTER ===== */
.footer {
  border-top: 1px solid rgba(0,0,0,0.08);
  padding:48px 24px;
  background: #fff;
  margin-top:auto;
}
.footer-inner { max-width: 1200px; margin:0 auto; }
.footer-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:32px;
  padding-bottom:32px;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}
@media (min-width: 768px) { .footer-cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer-col-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-ink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom:12px;
}
.footer-col ul { list-style: none; padding:0; margin:0; }
.footer-col li { margin-bottom:8px; }
.footer-col a {
  color: var(--c-gray);
  font-size: 14px;
  text-decoration: none;
  transition: color var(--t-fast);
}
.footer-col a:hover { color: var(--c-ink); }
.footer-bottom {
  display: flex;
  flex-direction: column;
  gap:12px;
  padding-top:28px;
  font-size: 13px;
  color: var(--c-gray);
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
/* ===== Réseaux sociaux du footer (extensible : Instagram, TikTok, …) ===== */
.footer-social { display: flex; align-items: center; gap:16px; margin:4px 0 20px; }
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: inherit; opacity: 0.5; transition: opacity 0.15s ease;
}
.footer-social a:hover { opacity: 1; }
.footer-social .soon { display: inline-flex; align-items: center; justify-content: center; color: inherit; opacity: 0.28; cursor: default; }

.footer-brand { color: var(--c-ink); font-weight: 600; letter-spacing: -0.02em; }

/* ===== TOAST ===== */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--c-ink);
  color: #fff;
  padding:12px 24px;
  border-radius:var(--r-full, 980px);
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 6px 28px rgba(0,0,0,.07);
  opacity: 0;
  transition: all var(--t-med) var(--ease-apple);
  z-index: var(--z-toast, 300);
  pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== FOCUS ACCESSIBILITY ===== */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
  border-radius:var(--r-xs, 4px);
}
.apple-input:focus-visible { outline: none; }

/* ===== LANGUAGE SWITCHER ===== */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap:8px;
  background: rgba(0,0,0,0.04);
  border: 1px solid rgba(0,0,0,0.06);
  color: var(--c-ink);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding:8px 12px;
  border-radius:var(--r-sm, 8px);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.lang-switch:hover {
  background: rgba(0,0,0,0.08);
  border-color: rgba(0,0,0,0.12);
}
.lang-switch svg { opacity: 0.7; }