/* ==========================================================================
   Ravalco inc. — refonte 2026 (v2)
   Palette officielle (voir memoire identite visuelle) ; aucun vert invente.
   Typo : Archivo etroit pour les titres, Fraunces italique en accent, Inter.
   ========================================================================== */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 900; font-stretch: 62% 125%; font-display: swap; src: url(../fonts/archivo-normal.woff2) format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 600; font-display: swap; src: url(../fonts/fraunces-italic.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(../fonts/inter-normal.woff2) format('woff2'); }

:root {
  --vert:        #0F4429;
  --vert-fonce:  #0A2F1C;
  --vert-clair:  #1A6B41;
  --or:          #D9A441;
  --or-fonce:    #B8862C;
  --creme:       #F7F5F1;
  --creme-fonce: #ECE7DE;
  --texte:       #23282B;
  --texte-doux:  #5C646B;
  --bordure:     #DDD8CF;
  --blanc:       #FFFFFF;

  --titre: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --accent: 'Fraunces', Georgia, serif;
  --corps: 'Inter', 'Segoe UI', -apple-system, Roboto, Arial, sans-serif;

  --lg: 1220px;
  --gouttiere: clamp(18px, 4vw, 40px);
  --rayon: 3px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--corps);
  font-size: 17px;
  line-height: 1.65;
  color: var(--texte);
  background: var(--blanc);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1.05em; }

.contenu { max-width: var(--lg); margin: 0 auto; padding: 0 var(--gouttiere); }

/* ---------- Typographie ---------- */
h1, h2, h3 {
  font-family: var(--titre);
  font-stretch: 78%;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -0.005em;
  margin: 0 0 .5em;
}
h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); }
h3 { font-size: clamp(1.35rem, 2vw, 1.65rem); font-weight: 700; line-height: 1.1; }
.accent { font-family: var(--accent); font-style: italic; font-weight: 450; letter-spacing: 0; }
.surtitre {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--corps); font-size: .78rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--or-fonce); margin-bottom: 18px;
}
.surtitre::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.sombre .surtitre, .vert .surtitre { color: var(--or); }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 16px 26px; border-radius: var(--rayon);
  font-family: var(--corps); font-weight: 600; font-size: 1rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.btn .fleche { transition: transform .2s; }
.btn:hover .fleche { transform: translateX(4px); }
.btn-or { background: var(--or); color: var(--vert-fonce); }
.btn-or:hover { background: #e4b555; }
.btn-ligne { border-color: rgba(255,255,255,.35); color: var(--blanc); }
.btn-ligne:hover { border-color: var(--blanc); background: rgba(255,255,255,.06); }
.btn-vert { background: var(--vert); color: var(--blanc); }
.btn-vert:hover { background: var(--vert-fonce); }
.lien-fleche {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 600; text-decoration: none; color: var(--vert);
  border-bottom: 1px solid var(--or); padding-bottom: 2px;
}
.lien-fleche:hover { color: var(--vert-clair); }
.sombre .lien-fleche, .vert .lien-fleche { color: var(--creme); }

/* ---------- En-tete ---------- */
.entete {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background .3s, box-shadow .3s, padding .3s;
  padding: 18px 0;
}
.entete.solide {
  background: rgba(10, 47, 28, .97);
  box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 8px 30px rgba(0,0,0,.18);
  padding: 8px 0;
}
.entete .contenu { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo img { height: 66px; width: auto; transition: height .3s; }
.entete.solide .logo img { height: 52px; }

.nav { display: flex; align-items: center; gap: 30px; }
.nav > a, .nav .deroulant > button {
  color: var(--creme); text-decoration: none; font-weight: 500; font-size: .96rem;
  background: none; border: 0; font-family: inherit; cursor: pointer; padding: 8px 0;
}
.nav > a:hover, .nav .deroulant > button:hover { color: var(--or); }
.nav .tel { font-weight: 600; }
/* La regle « .nav > a » ci-dessus retire le fond : on le redonne au bouton */
.nav .btn { padding: 12px 20px; color: var(--vert-fonce); background: var(--or); }
.nav .btn:hover { color: var(--vert-fonce); background: #e4b555; }

.deroulant { position: relative; }
.deroulant > button::after { content: " \25BE"; font-size: .8em; opacity: .7; }
.deroulant .panneau {
  position: absolute; top: 100%; left: -18px; min-width: 260px;
  background: var(--blanc); border-radius: var(--rayon);
  box-shadow: 0 18px 50px rgba(10,47,28,.22);
  padding: 10px; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.deroulant:hover .panneau, .deroulant:focus-within .panneau { opacity: 1; visibility: visible; transform: none; }
.deroulant .panneau a {
  display: block; padding: 10px 14px; border-radius: var(--rayon);
  color: var(--texte); text-decoration: none; font-weight: 500;
}
.deroulant .panneau a:hover { background: var(--creme); color: var(--vert); }

.bouton-menu {
  display: none; background: none; border: 1px solid rgba(255,255,255,.35);
  color: var(--creme); border-radius: var(--rayon); padding: 10px 14px;
  font: 600 .9rem var(--corps); cursor: pointer;
}
.menu-mobile {
  position: fixed; inset: 0; z-index: 60; background: var(--vert-fonce);
  padding: 90px var(--gouttiere) 40px; overflow-y: auto;
  display: none; flex-direction: column; gap: 4px;
}
.menu-mobile.ouvert { display: flex; }
.menu-mobile a {
  color: var(--creme); text-decoration: none; padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--titre); font-stretch: 80%; font-weight: 650; font-size: 1.5rem;
}
.menu-mobile .sous { font-family: var(--corps); font-size: 1rem; font-weight: 500; padding-left: 18px; color: rgba(247,245,241,.75); }
.menu-mobile .btn { margin-top: 22px; justify-content: center; font-family: var(--corps); font-size: 1rem; color: var(--vert-fonce); border-bottom: 0; }
.fermer-menu {
  position: absolute; top: 22px; right: var(--gouttiere);
  background: none; border: 1px solid rgba(255,255,255,.35); color: var(--creme);
  border-radius: var(--rayon); padding: 10px 14px; font: 600 .9rem var(--corps); cursor: pointer;
}

/* ---------- Banniere ---------- */
.hero {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--creme); overflow: hidden; background: var(--vert-fonce);
}
.hero-fond {
  position: absolute; inset: 0; background-size: cover; background-position: 62% 40%;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(10,47,28,.94) 0%, rgba(10,47,28,.78) 42%, rgba(10,47,28,.30) 100%),
    linear-gradient(0deg, rgba(10,47,28,.92) 0%, rgba(10,47,28,0) 38%);
}
.hero .contenu { position: relative; z-index: 2; width: 100%; padding-top: 140px; }
.hero h1 {
  font-size: clamp(3.1rem, 9.2vw, 7.6rem);
  font-stretch: 68%; font-weight: 820; text-transform: uppercase;
  line-height: .9; letter-spacing: -.012em; margin-bottom: 26px; max-width: 11ch;
}
.hero h1 .or { color: var(--or); }
.hero .accroche { font-size: clamp(1.05rem, 1.5vw, 1.2rem); max-width: 54ch; color: rgba(247,245,241,.88); }
.hero .devise { font-family: var(--accent); font-style: italic; font-size: 1.35rem; color: var(--or); margin: 6px 0 30px; }
.hero .actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-pied {
  position: relative; z-index: 2; margin-top: clamp(48px, 9vh, 96px);
  border-top: 1px solid rgba(247,245,241,.16);
}
.hero-pied .contenu { padding-top: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.hero-pied .item { padding: 20px 0; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(247,245,241,.62); }
.hero-pied .item strong { display: block; color: var(--creme); font-weight: 600; letter-spacing: .02em; text-transform: none; font-size: 1rem; margin-top: 2px; }

/* ---------- Bandeau de saison ---------- */
.saison { background: var(--or); color: var(--vert-fonce); }
.saison[hidden] { display: none; }
.saison .contenu { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; padding-top: 16px; padding-bottom: 16px; flex-wrap: wrap; }
.saison p { margin: 0; font-weight: 500; }
.saison strong { font-family: var(--titre); font-stretch: 80%; font-weight: 750; font-size: 1.15rem; letter-spacing: .01em; margin-right: 8px; }
.saison a { color: var(--vert-fonce); font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--vert-fonce); white-space: nowrap; }

/* ---------- Sections ---------- */
.section { padding: clamp(72px, 10vw, 128px) 0; }
.creme { background: var(--creme); }
.sombre { background: var(--vert-fonce); color: var(--creme); }
.sombre h2, .sombre h3, .vert h2, .vert h3 { color: var(--creme); }
.vert { background: var(--vert); color: var(--creme); }
.entete-section { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.entete-section h2 { margin: 0; }
.entete-section p { color: var(--texte-doux); margin: 0; max-width: 46ch; }
.sombre .entete-section p, .vert .entete-section p { color: rgba(247,245,241,.75); }

/* ---------- Expertises (liste numerotee) ---------- */
.expertises { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--bordure); }
.expertise {
  display: grid; grid-template-columns: 56px 1fr; gap: 0 18px;
  padding: 34px 32px 34px 0; border-bottom: 1px solid var(--bordure);
  text-decoration: none; color: inherit;
}
.expertise:nth-child(odd) { border-right: 1px solid var(--bordure); }
.expertise:nth-child(even) { padding-left: 32px; }
.expertise .num { font-family: var(--accent); font-style: italic; font-size: 1.6rem; color: var(--or-fonce); line-height: 1; padding-top: 2px; }
.expertise h3 { margin: 0 0 10px; color: var(--vert-fonce); transition: color .2s; }
.expertise p { grid-column: 2; margin: 0; color: var(--texte-doux); font-size: .98rem; max-width: 46ch; }
.expertise .aller { grid-column: 2; margin-top: 14px; font-weight: 600; font-size: .92rem; color: var(--vert); transition: color .2s; }
.expertise:hover h3 { color: var(--vert-clair); }
.expertise:hover .aller { color: var(--or-fonce); }
.etiquette-saison {
  display: inline-block; vertical-align: 3px; margin-left: 10px;
  font-family: var(--corps); font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  background: var(--vert); color: var(--creme); padding: 4px 9px; border-radius: 100px;
}

/* ---------- Crepi : texte + photos ---------- */
.duo { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(36px, 6vw, 88px); align-items: center; }
.collage { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.collage figure { margin: 0; }
.collage figure:last-child { margin-top: 56px; }
.collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--rayon); }
.collage figcaption { font-size: .85rem; color: var(--texte-doux); margin-top: 10px; }
.liste { list-style: none; padding: 0; margin: 0 0 30px; }
.liste li { padding: 12px 0 12px 30px; border-bottom: 1px solid var(--bordure); position: relative; }
.liste li::before { content: ""; position: absolute; left: 0; top: 24px; width: 14px; height: 2px; background: var(--or); }

/* ---------- Realisations ---------- */
.galerie { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; }
.tuile { position: relative; overflow: hidden; border-radius: var(--rayon); margin: 0; background: #0b2418; }
.tuile:first-child { grid-row: span 2; }
.tuile img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; transition: transform .6s ease; }
.tuile:first-child img { aspect-ratio: auto; }
.tuile:hover img { transform: scale(1.04); }
.tuile figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 20px 18px;
  background: linear-gradient(0deg, rgba(10,47,28,.94), rgba(10,47,28,0));
}
.tuile figcaption strong { display: block; font-family: var(--titre); font-stretch: 80%; font-weight: 700; font-size: 1.3rem; line-height: 1.1; color: var(--creme); }
.tuile figcaption span { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; color: var(--or); }

/* ---------- Engagements ---------- */
.engagements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.engagement { border-top: 2px solid var(--or); padding-top: 22px; }
.engagement h3 { font-size: 1.3rem; color: var(--vert-fonce); }
.engagement p { color: var(--texte-doux); font-size: .97rem; margin: 0; }

/* ---------- L'entreprise ---------- */
.portrait { position: relative; max-width: 420px; margin: 0 22px 22px 0; }
.portrait::before {
  content: ""; position: absolute; inset: 22px -22px -22px 22px;
  border: 1px solid rgba(217,164,65,.5); border-radius: var(--rayon);
}
.portrait img { position: relative; width: 100%; border-radius: var(--rayon); }
.signature { font-family: var(--accent); font-style: italic; font-size: 1.6rem; color: var(--or); margin-top: 26px; }

/* ---------- Zones ---------- */
.zones { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
.zone { background: var(--creme); border-radius: var(--rayon); padding: 34px; }
.zone h3 { color: var(--vert-fonce); }
.zone p { color: var(--texte-doux); margin: 0; }
.zone .villes { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 18px 0 0; }
.zone .villes li { background: var(--blanc); border: 1px solid var(--bordure); border-radius: 100px; padding: 6px 15px; font-size: .92rem; }
.zone.hiver { background: var(--vert-fonce); color: var(--creme); }
.zone.hiver h3 { color: var(--creme); }
.zone.hiver p { color: rgba(247,245,241,.8); }
.zone.hiver .villes li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: var(--creme); }

/* ---------- Appel final ---------- */
.appel { background: var(--or); color: var(--vert-fonce); text-align: center; }
.appel h2 { font-size: clamp(2.4rem, 6vw, 4.6rem); }
.appel p { max-width: 54ch; margin: 0 auto 30px; font-size: 1.08rem; }
.appel .actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.appel .btn-ligne { border-color: rgba(10,47,28,.4); color: var(--vert-fonce); }
.appel .btn-ligne:hover { border-color: var(--vert-fonce); background: rgba(10,47,28,.06); }

/* ---------- Pied de page ---------- */
.pied { background: var(--vert-fonce); color: rgba(247,245,241,.72); padding: 72px 0 28px; font-size: .95rem; }
.pied a { color: rgba(247,245,241,.85); text-decoration: none; }
.pied a:hover { color: var(--or); }
.pied h4 { font-family: var(--corps); color: var(--creme); font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; margin: 0 0 16px; }
.pied ul { list-style: none; padding: 0; margin: 0; }
.pied li { margin-bottom: 9px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 48px; }
.pied .logo-pied { height: 96px; width: auto; margin-bottom: 18px; }
.pied .devise { font-family: var(--accent); font-style: italic; color: var(--or); font-size: 1.15rem; }
.pied-bas { border-top: 1px solid rgba(247,245,241,.12); padding-top: 22px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: rgba(247,245,241,.5); }

/* ---------- Pages de service : banniere plus courte ---------- */
.hero-page { min-height: 80vh; min-height: 80svh; }
.hero-page h1 { max-width: 15ch; font-size: clamp(2.7rem, 7vw, 6rem); }
.fil { font-size: .85rem; color: rgba(247,245,241,.65); margin: 0 0 16px; }
.fil a { color: rgba(247,245,241,.85); }

/* ---------- Deneigement ---------- */
.hero-hiver .hero-fond { background-position: 72% 62%; }
.hero-hiver::after {
  background:
    linear-gradient(90deg, rgba(10,47,28,.93) 0%, rgba(10,47,28,.72) 38%, rgba(10,47,28,.12) 74%),
    linear-gradient(0deg, rgba(10,47,28,.90) 0%, rgba(10,47,28,0) 42%);
}
.expertises.trois { grid-template-columns: repeat(3, 1fr); }
.expertises.trois .expertise,
.expertises.trois .expertise:nth-child(odd),
.expertises.trois .expertise:nth-child(even) { padding: 30px 26px 30px 0; border-right: 0; }

.formules { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.formule {
  border: 1px solid rgba(247,245,241,.16); border-radius: var(--rayon);
  padding: clamp(26px, 4vw, 40px); background: rgba(255,255,255,.03);
}
.formule.vedette { border-color: var(--or); }
.formule h3 { font-size: clamp(1.7rem, 2.6vw, 2.2rem); margin-top: 14px; }
.formule p { color: rgba(247,245,241,.8); }
.formule ul { list-style: none; padding: 0; margin: 22px 0 0; }
.formule li { padding: 11px 0 11px 26px; border-top: 1px solid rgba(247,245,241,.1); position: relative; }
.formule li::before { content: ""; position: absolute; left: 0; top: 23px; width: 12px; height: 2px; background: var(--or); }
.formule .etiquette-saison { margin-left: 0; background: var(--or); color: var(--vert-fonce); }
.note-prix { margin-top: 28px; color: rgba(247,245,241,.7); font-size: .95rem; }

/* L'embleme d'hiver est sur fond noir : en mode « screen », le noir disparait
   sur un fond fonce et seuls la glace, la neige et les lettres restent. */
.embleme { width: min(440px, 82%); margin: 0 auto 30px; mix-blend-mode: screen; }
.appel.hiver { background: var(--vert-fonce); color: var(--creme); }
.appel.hiver h2 { color: var(--creme); }
.appel.hiver .btn-ligne { border-color: rgba(255,255,255,.35); color: var(--creme); }
.appel.hiver .btn-ligne:hover { border-color: var(--creme); background: rgba(255,255,255,.06); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .nav { display: none; }
  .bouton-menu { display: inline-block; }
  .engagements { grid-template-columns: 1fr 1fr; }
  .pied-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .entete-section, .duo, .zones, .formules { grid-template-columns: 1fr; }
  .expertises, .expertises.trois { grid-template-columns: 1fr; }
  .expertises.trois .expertise, .expertises.trois .expertise:nth-child(odd), .expertises.trois .expertise:nth-child(even) { padding: 26px 0; }
  .expertise, .expertise:nth-child(odd), .expertise:nth-child(even) { padding: 28px 0; border-right: 0; }
  .galerie { grid-template-columns: 1fr 1fr; }
  .tuile:first-child { grid-column: span 2; grid-row: auto; }
  .tuile:first-child img { aspect-ratio: 4 / 3; }
  .hero-pied .contenu { grid-template-columns: 1fr; }
  .hero-pied .item { padding: 12px 0; border-bottom: 1px solid rgba(247,245,241,.08); }
  .hero-pied .item:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .logo img { height: 54px; }
  .engagements, .pied-grille { grid-template-columns: 1fr; }
  .galerie { grid-template-columns: 1fr; }
  .tuile:first-child { grid-column: auto; }
  .collage figure:last-child { margin-top: 32px; }
  .hero .actions .btn, .appel .actions .btn { width: 100%; justify-content: center; }
  .zone { padding: 26px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}