/* =============================================================
   LIQUIDATION CÔTE-NORD — feuille de style
   Parti pris : les couleurs du logo en aplats (marine dominant,
   rouge des affichettes de liquidation, orange du soleil couchant),
   une seule famille (Archivo) dont la version étroite rappelle les
   lettres du logo. Le motif qui revient : l'étiquette de prix rouge
   accrochée à chaque appareil, comme en magasin.
   Aucune bibliothèque : ni Tailwind, ni AOS, ni jeu d'icônes.
   ============================================================= */

/* ---------- JETONS ---------- */
:root {
  /* Site en thème clair uniquement, à la demande du client : le
     thème sombre du système ne change rien à l'affichage. */
  color-scheme: light;

  /* Relevés sur le logo : marine #041239, rouge bannière #9B1717,
     orange couchant #EE933B, bleu acier #5691B2. */
  --marine:       #0A1A47;
  --marine-nuit:  #050F2C;
  --marine-2:     #13285F;
  --rouge:        #C8102E;   /* blanc dessus : 5,9:1 */
  --rouge-fonce:  #9B1717;
  --rouge-texte:  #B0102A;   /* petit texte rouge sur papier : 6,1:1 */
  --orange:       #EE933B;   /* jamais en texte sur clair : accent sur marine (7,6:1) */
  --orange-fonce: #A3500F;   /* orange lisible sur papier : 5,2:1 */
  --acier:        #5691B2;
  --bleu-pale:    #E8EEF8;   /* remplace les anciens aplats marine */
  --bleu-pale-2:  #D7E1F1;

  --papier:       #F6F4EF;
  --papier-2:     #ECE8DF;
  --blanc:        #FFFFFF;
  --encre:        #0A1A47;
  --gris:         #4A5470;   /* sur papier : 7,4:1 */
  --trait:        rgba(10, 26, 71, .14);

  /* Surfaces qui s'inversent en mode sombre */
  --fond:         var(--papier);
  --surface:      var(--blanc);
  --surface-2:    var(--papier-2);
  --texte:        var(--encre);
  --texte-doux:   var(--gris);
  --accent-texte: var(--rouge-texte);
  --lien:         var(--marine-2);

  --rayon:   14px;
  --rayon-s: 8px;
  --ombre:   0 1px 2px rgba(5, 15, 44, .06), 0 10px 30px -12px rgba(5, 15, 44, .22);
  --ombre-h: 0 2px 4px rgba(5, 15, 44, .08), 0 22px 44px -16px rgba(5, 15, 44, .35);

  --police: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --large: min(1240px, 100% - 32px);
}



/* ---------- BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  overflow-x: clip;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--police);
  font-weight: 500;          /* jamais de texte maigre */
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.08; margin: 0; overflow-wrap: break-word; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
[hidden] { display: none !important; }
.chiffres, .prix { font-variant-numeric: tabular-nums; }

.contenant { width: var(--large); margin-inline: auto; }

/* Titres : la version étroite d'Archivo, grasse, comme le mot du logo */
.titre {
  font-stretch: 72%;
  font-weight: 800;
  letter-spacing: -.01em;
}
.surtitre {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-texte);
}
.surtitre::before { content: ""; width: 26px; height: 3px; background: currentColor; border-radius: 2px; }

/* ---------- ACCESSIBILITÉ ---------- */
.lien-evitement {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  background: var(--rouge); color: #fff; padding: 12px 20px; font-weight: 800;
  border-radius: var(--rayon-s); text-decoration: none; transition: top .18s ease;
}
.lien-evitement:focus { top: 12px; }
:where(a, button, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px;
}
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- ICÔNES (sprite SVG intégré) ---------- */
.ico { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor;
       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- BOUTONS ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 24px; border-radius: 999px; border: 2px solid transparent;
  font: 800 1rem/1.1 var(--police); text-decoration: none; cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-rouge { background: var(--rouge); color: #fff; box-shadow: 0 10px 22px -10px rgba(200, 16, 46, .7); }
.btn-rouge:hover { background: var(--rouge-fonce); }
.btn-clair { background: #fff; color: var(--marine); }
.btn-contour { border-color: currentColor; color: inherit; background: transparent; }
.btn-contour:hover { background: rgba(255, 255, 255, .1); }
.btn-marine { background: var(--marine); color: #fff; }
.btn-marine:hover { background: var(--marine-2); }


/* ---------- BANDEAU + EN-TÊTE ---------- */
.bandeau {
  background: var(--bleu-pale); color: var(--encre); font-size: .86rem; font-weight: 600;
  border-bottom: 1px solid var(--trait);
}
.bandeau .contenant { display: flex; gap: 20px; justify-content: space-between; align-items: center; min-height: 38px; flex-wrap: wrap; }
.bandeau a { color: var(--encre); text-decoration: none; font-weight: 800; }
.bandeau p { display: flex; align-items: center; gap: 8px; }
.bandeau .ico { color: var(--rouge); }
@media (max-width: 720px) { .bandeau .bandeau-heures { display: none; } .bandeau .contenant { justify-content: center; } }

.entete {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--trait);
  transition: box-shadow .25s ease;
}
.entete.defile { box-shadow: 0 10px 30px -18px rgba(5, 15, 44, .45); }
.entete .contenant { display: flex; align-items: center; gap: 24px; min-height: 76px; }
.logo { display: inline-flex; border-radius: 10px; flex: none; }
.logo img { width: 128px; height: auto; }

.nav { margin-left: auto; }
.nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 2px; }
.nav a {
  display: block; padding: 10px 13px; border-radius: 999px; text-decoration: none;
  color: var(--texte); font-weight: 700; font-size: .97rem; transition: background-color .2s ease;
}
.nav a:hover, .nav a[aria-current="page"] { background: var(--surface-2); }
.entete .btn { min-height: 44px; padding: 10px 18px; }
.burger {
  display: none; margin-left: auto; width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--trait); background: var(--surface); color: var(--texte); cursor: pointer;
  align-items: center; justify-content: center;
}
.burger .ico { width: 24px; height: 24px; }
@media (max-width: 1080px) {
  .burger { display: inline-flex; }
  .entete .btn-appel { display: none; }
  .nav {
    position: fixed; inset: 76px 0 auto 0; margin: 0; background: var(--surface);
    border-bottom: 1px solid var(--trait); box-shadow: var(--ombre-h);
    padding: 12px 16px 20px; transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    max-height: calc(100dvh - 76px); overflow-y: auto;
  }
  .nav.ouvert { opacity: 1; transform: none; visibility: visible; }
  .nav ul { flex-direction: column; }
  .nav a { padding: 14px 12px; font-size: 1.1rem; border-radius: 10px; }
  .nav .nav-appel { display: block; margin-top: 10px; }
}
.nav .nav-appel { display: none; }
.nav .nav-appel a { background: var(--rouge); color: #fff; text-align: center; }

/* ---------- HÉROS ---------- */
.heros {
  position: relative; isolation: isolate; overflow: hidden;
  background: radial-gradient(110% 90% at 88% 8%, #FFE9D2 0%, #FBF4EA 34%, var(--papier) 58%, var(--bleu-pale) 100%);
  color: var(--encre);
  padding: clamp(48px, 7vw, 96px) 0 clamp(120px, 14vw, 190px);
}
/* Le soleil couchant et les montagnes du logo, en décor */
.heros-soleil {
  position: absolute; z-index: -1; right: -6vw; top: 8%;
  width: clamp(260px, 38vw, 560px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 60%, #F7B267 0%, var(--orange) 38%, #C75231 70%, transparent 71%);
  opacity: .35; filter: blur(2px);
}
.heros-montagnes { position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px; width: 100%; height: auto; }
.heros .contenant { display: grid; grid-template-columns: 1.08fr .92fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.heros h1 { font-size: clamp(2.6rem, 6.4vw, 5.2rem); margin: 18px 0 22px; }
.heros h1 em { font-style: normal; color: var(--rouge); }
.heros .chapo { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: var(--gris); max-width: 36ch; }
.heros .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.heros .btn-contour { color: var(--encre); }
.heros .btn-contour:hover, .section.sur-marine .btn-contour:hover { background: rgba(10, 26, 71, .06); }
.heros-etats { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; list-style: none; }
.heros-etats li {
  font-size: .86rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--trait); color: var(--encre);
}

/* Vitrine du héros : la meilleure aubaine, deux appareils derrière */
.vitrine { position: relative; min-height: 440px; }
.vitrine-carte {
  position: absolute; background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -24px rgba(10, 26, 71, .45);
  border: 1px solid var(--trait);
  overflow: visible; display: block; text-decoration: none; color: var(--encre);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.vitrine-carte img { border-radius: 22px; }
.vitrine-carte.principale { width: 62%; left: 19%; top: 0; z-index: 3; }
.vitrine-carte.gauche { width: 42%; left: -2%; top: 30%; transform: rotate(-8deg); z-index: 1; }
.vitrine-carte.droite { width: 42%; right: -2%; top: 36%; transform: rotate(7deg); z-index: 2; }
.vitrine-carte.gauche img, .vitrine-carte.droite img { filter: saturate(.9) brightness(.94); }
.vitrine-carte.principale:hover { transform: translateY(-6px); }
.vitrine-carte .etiquette { position: absolute; right: -18px; top: 26px; }
.vitrine-legende {
  position: absolute; left: 0; right: 0; bottom: -64px; text-align: center; color: var(--gris); font-size: .95rem; font-weight: 600;
}
.vitrine-legende strong { color: var(--encre); }
@media (max-width: 900px) {
  .heros .contenant { grid-template-columns: 1fr; }
  .vitrine { min-height: 0; aspect-ratio: 1 / .9; max-width: 460px; width: 100%; margin: 12px auto 40px; }
}

/* ---------- ÉTIQUETTE DE PRIX (motif signature) ---------- */
.etiquette {
  --c: var(--rouge);
  position: relative; isolation: isolate; display: inline-grid; justify-items: start; gap: 0;
  padding: 10px 16px 10px 30px; color: #fff;
  transform: rotate(-4deg); transform-origin: 0 50%;
  filter: drop-shadow(0 8px 10px rgba(5, 15, 44, .28));
  transition: transform .3s cubic-bezier(.2, .8, .2, 1);
}
/* La forme découpée est portée par un pseudo-élément : posée sur
   l'étiquette elle-même, la découpe rognerait la pastille de remise. */
.etiquette::after {
  content: ""; position: absolute; inset: 0; z-index: -2; background: var(--c); border-radius: 4px;
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 50%);
}
/* Le trou de l'étiquette */
.etiquette::before {
  content: ""; position: absolute; left: 12px; top: 50%; width: 8px; height: 8px; margin-top: -4px; z-index: -1;
  border-radius: 50%; background: #fff; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.etiquette.reguliere { --c: var(--marine); }
.etiquette .prix { font-stretch: 75%; font-weight: 900; font-size: 1.5rem; line-height: 1; letter-spacing: -.01em; }
.etiquette s { font-size: .82rem; font-weight: 600; opacity: .85; }
.etiquette .remise {
  position: absolute; right: -10px; top: -12px; background: var(--orange); color: var(--marine-nuit);
  font-weight: 900; font-size: .8rem; padding: 3px 8px; border-radius: 999px; transform: rotate(8deg);
}
.etiquette-grande .prix { font-size: 2.3rem; }
.etiquette-grande { padding: 14px 22px 14px 36px; }
.etiquette-grande s { font-size: 1rem; }


/* ---------- BANDE DE CHIFFRES ---------- */
.chiffres-bande { background: var(--rouge); color: #fff; }
.chiffres-bande ul {
  list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr);
}
.chiffres-bande li { padding: 26px 18px; border-left: 1px solid rgba(255, 255, 255, .22); }
.chiffres-bande li:first-child { border-left: 0; }
.chiffres-bande strong { display: block; font-stretch: 72%; font-weight: 900; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; }
.chiffres-bande span { font-weight: 700; font-size: .95rem; color: #FFE3E3; }
@media (max-width: 760px) {
  .chiffres-bande ul { grid-template-columns: 1fr 1fr; }
  .chiffres-bande li:nth-child(3) { border-left: 0; }
  .chiffres-bande li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .22); }
}

/* ---------- SECTIONS ---------- */
.section { padding: clamp(64px, 8vw, 112px) 0; }
.section.alt { background: var(--surface-2); }
.section.sur-marine { background: var(--bleu-pale); color: var(--encre); }

.section-tete { display: flex; align-items: end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.section-tete h2 { font-size: clamp(2.1rem, 4.6vw, 3.6rem); margin-top: 12px; }
.section-tete p { color: var(--texte-doux); max-width: 56ch; margin-top: 12px; font-size: 1.08rem; }


/* ---------- CARTES PRODUITS ---------- */
.grille {
  display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.carte {
  position: relative; background: var(--surface); border-radius: var(--rayon); box-shadow: var(--ombre);
  border: 1px solid var(--trait); transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-h); }
.carte:hover .etiquette { transform: rotate(0deg); }
.carte a.carte-lien { position: absolute; inset: 0; z-index: 2; border-radius: var(--rayon); }
.carte-photo { position: relative; background: #fff; border-radius: var(--rayon) var(--rayon) 0 0; overflow: hidden; aspect-ratio: 1; }
.carte-photo img { width: 100%; height: 100%; object-fit: contain; padding: 14px; transition: transform .4s ease; }
.carte:hover .carte-photo img { transform: scale(1.04); }
.carte-photo .sans-photo { display: grid; place-items: center; height: 100%; color: #4A5470; font-weight: 700; text-align: center; padding: 24px; gap: 10px; }
.carte-photo .sans-photo .ico { width: 54px; height: 54px; stroke-width: 1.4; margin-inline: auto; }
.pastille {
  position: absolute; left: 12px; top: 12px; z-index: 1;
  font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: var(--marine); color: #fff;
}
.pastille.etat-boite-ouverte { background: var(--orange); color: var(--marine-nuit); }
.pastille.etat-reconditionnee { background: var(--acier); color: var(--marine-nuit); }
.carte-corps { padding: 16px 18px 8px; display: grid; gap: 4px; flex: 1; }
.carte-marque { font-size: .8rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-texte); }
.carte h3 { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.carte-modele { font-size: .86rem; color: var(--texte-doux); font-weight: 600; }
.carte-pied { padding: 8px 18px 20px 26px; display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.carte-pied .voir { font-size: .88rem; font-weight: 800; color: var(--lien); display: inline-flex; gap: 6px; align-items: center; }
.carte:hover .voir .ico { transform: translateX(3px); }
.voir .ico { transition: transform .2s ease; }

/* Rangée défilante des liquidations */
.rangee {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 280px); gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 28px; margin: 0 -4px;
  scrollbar-width: thin; scrollbar-color: var(--rouge) transparent;
}
.rangee > * { scroll-snap-align: start; }
.rangee-nav { display: flex; gap: 10px; }
.rangee-nav button {
  width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--trait); background: var(--surface);
  color: var(--texte); cursor: pointer; display: grid; place-items: center; transition: background-color .2s ease;
}
.rangee-nav button:hover { background: var(--surface-2); }

/* ---------- FILTRES DU CATALOGUE ---------- */
.filtres { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; justify-content: space-between; margin-bottom: 28px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px;
  border-radius: 999px; border: 2px solid var(--trait); background: var(--surface); color: var(--texte);
  font: 700 .95rem var(--police); cursor: pointer; transition: all .2s ease;
}
.puce span { font-size: .78rem; background: var(--surface-2); color: var(--texte-doux); padding: 2px 8px; border-radius: 999px; }
.puce:hover { border-color: var(--texte-doux); }
.puce[aria-pressed="true"] { background: var(--marine); border-color: var(--marine); color: #fff; }
.puce[aria-pressed="true"] span { background: rgba(255, 255, 255, .18); color: #fff; }

.selecteurs { display: flex; gap: 10px; flex-wrap: wrap; }
.selecteurs label { display: grid; gap: 4px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--texte-doux); }
.selecteurs select {
  min-height: 44px; padding: 8px 38px 8px 14px; border-radius: 12px; border: 2px solid var(--trait);
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A5470' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: var(--texte); font: 700 .95rem var(--police); appearance: none; cursor: pointer;
}
.resultat-compte { color: var(--texte-doux); font-weight: 700; margin-bottom: 16px; }
.vide { padding: 48px 24px; text-align: center; border: 2px dashed var(--trait); border-radius: var(--rayon); color: var(--texte-doux); }

/* ---------- MARQUES ---------- */
.marques { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 40px; padding: 0; margin: 0; list-style: none; }
.marques li { font-stretch: 70%; font-weight: 900; font-size: clamp(1.6rem, 3vw, 2.3rem); color: var(--texte-doux); letter-spacing: .02em; opacity: .8; }
.marques li span { font-stretch: 100%; font-size: .8rem; font-weight: 700; vertical-align: super; color: var(--accent-texte); margin-left: 4px; }

/* ---------- ÉTATS (d'où viennent nos prix) ---------- */
.etats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.etat {
  background: var(--surface); border-radius: var(--rayon); padding: 28px; border: 1px solid var(--trait);
  box-shadow: var(--ombre); display: grid; gap: 12px; align-content: start;
}
.etat-entete { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.etat .pastille { position: static; }
.etat-nombre { font-stretch: 72%; font-weight: 900; font-size: 2.2rem; line-height: 1; }
.etat h3 { font-size: 1.35rem; }
.etat p { color: var(--texte-doux); }
@media (max-width: 860px) { .etats { grid-template-columns: 1fr; } }

/* ---------- SERVICES (réparation, déménagement) ---------- */
.service { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.service h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: 12px 0 18px; }
.service p { font-size: 1.1rem; }
.sur-marine .service p { color: var(--gris); }
.service .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.service-visuel { position: relative; }
.service-visuel img { border-radius: 24px; }
.service-visuel .disque {
  position: absolute; inset: 8% 8%; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle, rgba(238, 147, 59, .35), transparent 68%);
}
.service-visuel img { position: relative; z-index: 1; }
.liste-coches { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 12px; }
.liste-coches li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.liste-coches .ico { color: var(--rouge); margin-top: 3px; }
.sur-marine .btn-contour { color: var(--encre); }
@media (max-width: 860px) { .service { grid-template-columns: 1fr; } .service-visuel { max-width: 420px; } }

.carte-service {
  display: grid; grid-template-columns: 150px 1fr auto; gap: 28px; align-items: center;
  background: var(--surface); border-radius: 24px; padding: 28px 32px; box-shadow: var(--ombre); border: 1px solid var(--trait);
}
.carte-service img { width: 150px; height: 150px; object-fit: contain; }
.carte-service h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); margin: 8px 0 10px; }
.carte-service p { color: var(--texte-doux); }
@media (max-width: 860px) { .carte-service { grid-template-columns: 1fr; text-align: left; } .carte-service img { width: 110px; height: 110px; } }

/* ---------- À PROPOS ---------- */
.apropos { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(32px, 6vw, 80px); }
.apropos h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin-top: 12px; position: sticky; top: 110px; }
.apropos-texte { display: grid; gap: 18px; font-size: 1.08rem; }
.apropos-texte p:first-child { font-size: 1.3rem; font-weight: 600; line-height: 1.5; }
@media (max-width: 860px) { .apropos { grid-template-columns: 1fr; } .apropos h2 { position: static; } }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin-inline: auto; display: grid; gap: 12px; }
.faq details { background: var(--surface); border: 1px solid var(--trait); border-radius: var(--rayon); transition: box-shadow .2s ease; }
.faq details[open] { box-shadow: var(--ombre); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 60px 20px 24px; position: relative;
  font-weight: 800; font-size: 1.08rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 14px; margin-top: -9px;
  border-right: 3px solid var(--accent-texte); border-bottom: 3px solid var(--accent-texte);
  transform: rotate(45deg); transition: transform .25s ease;
}
.faq details[open] summary::after { transform: rotate(225deg); margin-top: -3px; }
.faq .reponse { padding: 0 24px 22px; color: var(--texte-doux); display: grid; gap: 10px; }
.faq .reponse ul { margin: 0; padding-left: 20px; }

/* ---------- CONSEILS (articles) ---------- */
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-carte {
  position: relative; background: var(--surface); border-radius: var(--rayon); overflow: hidden;
  border: 1px solid var(--trait); box-shadow: var(--ombre); transition: transform .25s ease, box-shadow .25s ease;
  display: flex; flex-direction: column;
}
.article-carte:hover { transform: translateY(-5px); box-shadow: var(--ombre-h); }
.article-carte img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.article-carte div { padding: 20px 22px 24px; display: grid; gap: 10px; }
.article-carte time { font-size: .82rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-texte); }
.article-carte h3 { font-size: 1.2rem; line-height: 1.3; }
.article-carte a { color: inherit; text-decoration: none; }
.article-carte a::after { content: ""; position: absolute; inset: 0; }
@media (max-width: 960px) { .articles { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }

/* ---------- CONTACT ---------- */
.contact { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
.contact h2 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); margin: 12px 0 16px; }
.contact-infos { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.contact-infos li { display: flex; gap: 14px; align-items: center; }
.contact-infos .rond {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: rgba(200, 16, 46, .1); color: var(--rouge);
}
.contact-infos a { color: var(--encre); font-weight: 800; text-decoration: none; font-size: 1.1rem; overflow-wrap: anywhere; }
.contact-infos small { display: block; color: var(--gris); font-weight: 600; font-size: .85rem; }
.heures { margin-top: 32px; border-top: 1px solid var(--trait); padding-top: 24px; }
.heures h3 { font-size: 1.1rem; margin-bottom: 12px; }
.heures table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.heures td { padding: 7px 0; border-bottom: 1px dashed var(--trait); color: var(--gris); }
.heures td:last-child { text-align: right; font-weight: 700; color: var(--encre); }
.heures tr.ferme td:last-child { color: var(--rouge-texte); }
.heures tr.aujourdhui td { color: var(--rouge-texte); font-weight: 800; }

@media (max-width: 900px) { .contact { grid-template-columns: 1fr; } }
.contact > * { min-width: 0; }

.formulaire {
  background: var(--surface); color: var(--texte); border-radius: 24px; padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--ombre-h); border: 1px solid var(--trait); display: grid; gap: 18px;
}
.formulaire h3 { font-size: 1.5rem; }
.champs-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .champs-2 { grid-template-columns: 1fr; } }
.champ { display: grid; gap: 6px; }
.champ label { font-weight: 800; font-size: .92rem; }
.champ label .requis { color: var(--accent-texte); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--trait);
  background: var(--fond); color: var(--texte); font: 500 1rem var(--police); transition: border-color .2s ease;
}
.champ textarea { min-height: 130px; resize: vertical; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--acier); outline: none; }
.champ .erreur { color: var(--accent-texte); font-size: .86rem; font-weight: 700; }
.champ [aria-invalid="true"] { border-color: var(--rouge); }
.formulaire .note { font-size: .86rem; color: var(--texte-doux); }
.formulaire .btn { justify-self: start; }

/* ---------- PIED DE PAGE ---------- */
.pied { background: var(--papier-2); color: var(--gris); padding: 64px 0 28px; border-top: 4px solid var(--rouge); }
.pied .contenant > .colonnes { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; }
.pied .logo { background: #fff; padding: 8px 12px; border-radius: 14px; }
.pied .logo img { width: 130px; }
.pied h2 { font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--encre); margin-bottom: 14px; font-weight: 800; }
.pied ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pied a { color: var(--encre); text-decoration: none; font-weight: 600; }
.pied a:hover { color: var(--rouge-texte); text-decoration: underline; }
.pied .devise { margin-top: 16px; max-width: 34ch; }
.pied-bas { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--trait); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .9rem; }
@media (max-width: 860px) { .pied .contenant > .colonnes { grid-template-columns: 1fr 1fr; } .pied .colonne-marque { grid-column: 1 / -1; } }
@media (max-width: 520px) { .pied .contenant > .colonnes { grid-template-columns: 1fr; } }
.pied .colonnes > * { min-width: 0; }
.pied a { overflow-wrap: anywhere; }

/* ---------- FIL D'ARIANE ---------- */
.ariane { padding: 22px 0 0; font-size: .9rem; font-weight: 600; }
.ariane ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; color: var(--texte-doux); }
.ariane li + li::before { content: "/"; margin-right: 6px; opacity: .6; }
.ariane a { color: var(--texte-doux); }

/* ---------- FICHE PRODUIT ---------- */
.fiche { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); padding: 28px 0 72px; align-items: start; }
.galerie { position: sticky; top: 100px; display: grid; gap: 14px; }
.galerie-principale {
  position: relative; background: #fff; border-radius: 22px; border: 1px solid var(--trait); overflow: hidden; aspect-ratio: 1;
}
.galerie-principale img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.galerie-vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.galerie-vignettes button {
  background: #fff; border: 2px solid var(--trait); border-radius: 12px; padding: 4px; cursor: pointer; aspect-ratio: 1;
  transition: border-color .2s ease;
}
.galerie-vignettes button[aria-current="true"] { border-color: var(--rouge); }
.galerie-vignettes img { width: 100%; height: 100%; object-fit: contain; }
.fiche-infos { display: grid; gap: 18px; }
.fiche-infos .carte-marque { font-size: .9rem; }
.fiche-infos h1 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); font-stretch: 80%; font-weight: 800; }
.fiche-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.fiche-meta .pastille { position: static; }
.modele { font-weight: 700; color: var(--texte-doux); }
.en-stock { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #1F7A4D; }

.fiche-prix { padding: 14px 0 6px 6px; }
.fiche-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fiche-garanties { list-style: none; padding: 18px 20px; margin: 4px 0 0; display: grid; gap: 12px; background: var(--surface-2); border-radius: var(--rayon); }
.fiche-garanties li { display: flex; gap: 12px; font-weight: 600; font-size: .98rem; }
.fiche-garanties .ico { color: var(--accent-texte); margin-top: 3px; }
.nom-complet { font-size: .84rem; color: var(--texte-doux); }
@media (max-width: 900px) { .fiche { grid-template-columns: 1fr; } .galerie { position: static; } }

/* Texte long (descriptions, articles, politiques) */
.prose { font-size: 1.05rem; display: grid; gap: 14px; max-width: 74ch; }
.prose h2, .prose h3 { font-size: 1.5rem; margin-top: 18px; }
.prose h4 { font-size: 1.12rem; margin-top: 10px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; }
.prose li::marker { color: var(--accent-texte); }
.prose strong { font-weight: 800; }
.bloc-description { background: var(--surface); border: 1px solid var(--trait); border-radius: 22px; padding: clamp(24px, 4vw, 44px); }
.bloc-description > h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-bottom: 18px; }

/* Pages de texte */
.page-tete { background: linear-gradient(180deg, var(--bleu-pale), var(--papier)); color: var(--encre); padding: clamp(48px, 7vw, 88px) 0 clamp(44px, 6vw, 72px); position: relative; overflow: hidden; isolation: isolate; }
.page-tete h1 { font-size: clamp(2.3rem, 5.4vw, 4.2rem); margin-top: 14px; max-width: 20ch; }
.page-tete p { color: var(--gris); max-width: 60ch; margin-top: 16px; font-size: 1.12rem; }
.page-tete .ariane { padding: 0 0 18px; }
.page-tete .ariane ol, .page-tete .ariane a { color: var(--gris); }
.page-corps { padding: clamp(48px, 7vw, 88px) 0; }
.page-corps .prose { margin-inline: auto; }
.article-image { border-radius: 22px; margin: -40px auto 40px; max-width: 980px; width: 100%; aspect-ratio: 16 / 8; object-fit: cover; box-shadow: var(--ombre-h); position: relative; }

/* Services déménagement */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.duo article { background: var(--surface); border-radius: var(--rayon); padding: 28px; border: 1px solid var(--trait); box-shadow: var(--ombre); display: grid; gap: 10px; }
.duo .rond { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--rouge); color: #fff; }
.duo .rond .ico { width: 26px; height: 26px; }
.duo h3 { font-size: 1.35rem; }
.duo p { color: var(--texte-doux); }
@media (max-width: 760px) { .duo { grid-template-columns: 1fr; } }

/* ---------- APPARITION AU DÉFILEMENT ---------- */
/* Sans JS (classe .js absente), tout est visible d'emblée. */
.js .revele { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .revele.vu { opacity: 1; transform: none; }
.js .revele[data-delai="1"] { transition-delay: .08s; }
.js .revele[data-delai="2"] { transition-delay: .16s; }
.js .revele[data-delai="3"] { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .revele { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Entrée du héros, une seule fois au chargement */
@keyframes monte { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes balance { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(-9deg); } }
.heros .entree { animation: monte .8s cubic-bezier(.2, .8, .2, 1) both; }
.heros .entree:nth-child(2) { animation-delay: .08s; }
.heros .entree:nth-child(3) { animation-delay: .16s; }
.heros .entree:nth-child(4) { animation-delay: .24s; }
.heros .entree:nth-child(5) { animation-delay: .32s; }
.vitrine .etiquette { animation: balance 3.6s ease-in-out 1s infinite; }

/* Barre de défilement */
html { scrollbar-color: var(--rouge) var(--fond); }
::-webkit-scrollbar { width: 12px; height: 10px; }
::-webkit-scrollbar-track { background: var(--fond); }
::-webkit-scrollbar-thumb { background: var(--rouge); border-radius: 999px; border: 3px solid var(--fond); }

/* Téléphone : deux appareils par rangée, comme un rayon de magasin */
@media (max-width: 560px) {
  .grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grille .carte-photo img { padding: 8px; }
  .grille .pastille { left: 8px; top: 8px; font-size: .62rem; padding: 4px 7px; }
  .grille .carte-corps { padding: 10px 10px 4px; }
  .grille .carte-marque { font-size: .68rem; }
  .grille .carte h3 { font-size: .9rem; }
  .grille .carte-modele { font-size: .74rem; overflow-wrap: anywhere; }
  .grille .carte-pied { padding: 18px 8px 14px 14px; }
  .grille .carte-pied .voir { display: none; }
  .grille .etiquette { padding: 7px 10px 7px 24px; }
  .grille .etiquette .prix { font-size: 1.15rem; }
  .grille .etiquette s { font-size: .7rem; }
  .grille .etiquette::before { left: 9px; width: 6px; height: 6px; margin-top: -3px; }
  .grille .etiquette .remise { font-size: .68rem; right: -6px; }
}
@media (max-width: 900px) {
  .galerie-vignettes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .galerie-vignettes button { flex: 0 0 68px; scroll-snap-align: start; }
}
/* En-tête de page avec montagnes : la place pour qu'elles ne recouvrent pas le texte */
.page-tete:has(.heros-montagnes) { padding-bottom: clamp(120px, 13vw, 180px); }
.page-corps .contenant.etroit { max-width: 980px; }
/* Meubles et literie : vendus en magasin, sans fiche en ligne */
.aussi {
  margin-top: 40px; padding: 26px 28px; border-radius: var(--rayon); border: 2px dashed var(--trait);
  display: grid; gap: 12px; background: var(--surface);
}
.aussi ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.aussi li::marker { color: var(--accent-texte); }
.aussi p:last-child { color: var(--texte-doux); }