/* =========================================================
   Domaine des Vignes Normandes — Feuille de style commune
   ========================================================= */

:root {
  --bordeaux: #5a1a2b;
  --bordeaux-clair: #7d2d40;
  --or: #c9a45c;
  --or-clair: #e3c987;
  --vert: #3a4a3a;
  --vert-clair: #6b7d63;
  --creme: #f7f3ec;
  --creme-fonce: #ece4d6;
  --encre: #2a2420;
  --gris: #6c655d;
  --blanc: #ffffff;
  --ombre: 0 12px 40px rgba(42, 36, 32, .12);
  --ombre-douce: 0 4px 18px rgba(42, 36, 32, .08);
  --transition: .35s cubic-bezier(.22, .61, .36, 1);
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", "Segoe UI", system-ui, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--encre);
  background: var(--creme);
  line-height: 1.7;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; color: var(--bordeaux); }

a { color: inherit; text-decoration: none; }

img { max-width: 100%; display: block; }

.conteneur { width: min(1180px, 92%); margin-inline: auto; }

.section { padding: clamp(4rem, 9vw, 8rem) 0; }

/* ----- Surtitre & titres de section ----- */
.surtitre {
  display: inline-block;
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--or);
  font-weight: 600;
  margin-bottom: 1rem;
}
.surtitre::before { content: "— "; }

.titre-section { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 1.5rem; }
.intro-section { max-width: 60ch; color: var(--gris); font-size: 1.08rem; }

/* =========================================================
   En-tête / navigation
   ========================================================= */
.entete {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem clamp(1.5rem, 5vw, 4rem);
  background: rgba(247, 243, 236, .92);
  backdrop-filter: blur(12px);
  box-shadow: var(--ombre-douce);
  transition: var(--transition);
}
.entete.compacte {
  background: rgba(247, 243, 236, .96);
  padding-block: .85rem;
}

.logo { display: flex; align-items: center; gap: .9rem; color: var(--bordeaux); transition: var(--transition); }

/* Page d'accueil : en-tête transparent en haut (menu bordeaux), puis clair au défilement */
.page-accueil .entete:not(.compacte) {
  background: transparent; box-shadow: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.page-accueil .entete:not(.compacte) .nav a,
.page-accueil .entete:not(.compacte) .nav a.actif { color: var(--blanc); }
.page-accueil .entete:not(.compacte) .logo { color: var(--blanc); }
.page-accueil .entete:not(.compacte) .btn-menu span { background: var(--blanc); }
.page-accueil .entete:not(.compacte) .nav a::after { background: var(--blanc); height: 3px; }
.logo-marque { font-family: var(--serif); font-size: 2rem; font-weight: 600; line-height: 1.05; }
.logo-marque small { display: block; font-family: var(--sans); font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; opacity: .85; font-weight: 500; margin-top: .55rem; }
.logo svg, .logo img { width: 50px; height: 50px; flex: 0 0 auto; }

.nav { display: flex; align-items: center; gap: 2.2rem; }
.nav a {
  position: relative; color: var(--bordeaux); font-size: 1.15rem; font-weight: 600;
  letter-spacing: .02em; transition: var(--transition);
}
.entete.compacte .nav a { color: var(--bordeaux); }
.nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--or); transition: var(--transition);
}
.nav a:hover::after, .nav a.actif::after { width: 100%; }
.nav a.actif { color: var(--bordeaux); }

.btn-menu { display: none; background: none; border: 0; cursor: pointer; width: 30px; height: 22px; position: relative; z-index: 110; }
.btn-menu span { position: absolute; left: 0; height: 2px; width: 100%; background: var(--bordeaux); transition: var(--transition); }
.btn-menu span:nth-child(1) { top: 0; }
.btn-menu span:nth-child(2) { top: 10px; }
.btn-menu span:nth-child(3) { top: 20px; }
body.menu-ouvert .btn-menu span:nth-child(1) { top: 10px; transform: rotate(45deg); background: var(--bordeaux); }
body.menu-ouvert .btn-menu span:nth-child(2) { opacity: 0; }
body.menu-ouvert .btn-menu span:nth-child(3) { top: 10px; transform: rotate(-45deg); background: var(--bordeaux); }

/* =========================================================
   Boutons
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .95rem 2.1rem; border-radius: 2px; font-size: .9rem;
  font-weight: 600; letter-spacing: .04em; cursor: pointer;
  border: 1.5px solid transparent; transition: var(--transition);
}
.btn-primaire { background: var(--or); color: var(--encre); }
.btn-primaire:hover { background: var(--or-clair); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(201, 164, 92, .4); }
.btn-secondaire { border-color: rgba(255, 255, 255, .6); color: var(--blanc); }
.btn-secondaire:hover { background: var(--blanc); color: var(--bordeaux); border-color: var(--blanc); }
.btn-fonce { border-color: var(--bordeaux); color: var(--bordeaux); }
.btn-fonce:hover { background: var(--bordeaux); color: var(--blanc); }

/* =========================================================
   Hero
   ========================================================= */
.hero {
  position: relative; min-height: 100vh; display: flex; align-items: center;
  color: var(--blanc); overflow: hidden;
}
.hero-fond { position: absolute; inset: 0; z-index: -2; }
.hero-fond::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42,36,32,.55) 0%, rgba(90,26,43,.45) 60%, rgba(42,36,32,.75) 100%); }
.hero-degrade {
  position: absolute; inset: 0; z-index: -3;
  background:
    radial-gradient(120% 80% at 70% 20%, #7d2d40 0%, transparent 55%),
    radial-gradient(100% 100% at 20% 90%, #2a3326 0%, transparent 60%),
    linear-gradient(160deg, #3a2030 0%, #5a1a2b 40%, #2a3326 100%);
}
.hero-image { position: absolute; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; }
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(3px); transform: scale(1.06);
}
/* Voile bordeaux semi-transparent sur toute l'image */
.hero-bordeaux { position: absolute; inset: 0; background: rgba(90, 26, 43, .55); z-index: -1; pointer-events: none; }
.hero .conteneur { position: relative; z-index: 2; padding-top: 6rem; }
/* Bloc de texte calé à gauche (hero d'accueil avec zone bordeaux) */
.hero:has(.hero-bordeaux) .conteneur {
  width: auto; max-width: min(560px, calc(50% - 90px));
  margin-left: 50px; margin-right: auto;
}
.hero h1 { color: var(--blanc); font-size: clamp(2.8rem, 7vw, 5.5rem); margin-bottom: 1.5rem; }
.hero h1 em { color: var(--or-clair); font-style: italic; }
.hero p { max-width: 52ch; font-size: 1.2rem; color: rgba(255,255,255,.9); margin-bottom: 2.5rem; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }

.hero-defile {
  position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,.7); font-size: .72rem; letter-spacing: .25em;
  text-transform: uppercase; display: flex; flex-direction: column; align-items: center; gap: .6rem;
}
.hero-defile span { width: 1px; height: 40px; background: rgba(255,255,255,.5); animation: defile 2s infinite; }
@keyframes defile { 0%,100% { opacity: .3; transform: scaleY(.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* Bandeau hero plus court pour pages intérieures
   (contenu ancré en haut pour un fil d'Ariane au même top sur toutes les pages) */
.hero-page { min-height: 50vh; align-items: flex-start; }
.hero-page .conteneur { padding-top: 9rem; }
.hero-page h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); }

/* Fil d'Ariane */
.ariane { font-size: .82rem; letter-spacing: .05em; color: rgba(255,255,255,.7); margin-bottom: 1.2rem; }
.ariane a:hover { color: var(--or-clair); }

/* =========================================================
   Bandeau de chiffres
   ========================================================= */
.chiffres { background: var(--bordeaux); color: var(--blanc); }
.chiffres .grille { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem; text-align: center; }
.chiffre-val { font-family: var(--serif); font-size: clamp(2.4rem, 5vw, 3.6rem); color: var(--or-clair); line-height: 1; }
.chiffre-lib { font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-top: .6rem; color: rgba(255,255,255,.78); }

/* =========================================================
   Bloc en deux colonnes (image + texte)
   ========================================================= */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.duo.inverse .duo-visuel { order: 2; }
.duo-visuel {
  position: relative; aspect-ratio: 4/5; border-radius: 4px; overflow: hidden;
  box-shadow: var(--ombre);
}
.duo-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.visuel-vignoble { background: linear-gradient(160deg, #6b7d63 0%, #3a4a3a 100%); }
.visuel-cave { background: linear-gradient(160deg, #7d2d40 0%, #3a2030 100%); }
.visuel-terroir { background: linear-gradient(160deg, #c9a45c 0%, #7d6535 100%); }
.duo-visuel .badge {
  position: absolute; bottom: 1.5rem; left: 1.5rem; right: 1.5rem;
  background: rgba(247,243,236,.95); padding: 1.2rem 1.5rem; border-radius: 3px;
  font-family: var(--serif); color: var(--bordeaux); font-size: 1.1rem; box-shadow: var(--ombre-douce);
}

/* =========================================================
   Cartes
   ========================================================= */
.grille-cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.8rem; }
.carte {
  background: var(--blanc); border-radius: 5px; padding: 2.2rem;
  box-shadow: var(--ombre-douce); transition: var(--transition);
  border: 1px solid var(--creme-fonce);
}
.carte:hover { transform: translateY(-6px); box-shadow: var(--ombre); }
.carte-icone {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  background: var(--creme); color: var(--or); margin-bottom: 1.4rem;
}
.carte-icone svg { width: 28px; height: 28px; }
.carte h3 { font-size: 1.5rem; margin-bottom: .7rem; }
.carte p { color: var(--gris); font-size: .98rem; }

/* =========================================================
   Frise chronologique (historique)
   ========================================================= */
.frise { position: relative; max-width: 820px; margin-inline: auto; }
.frise::before { content: ""; position: absolute; left: 244px; top: 0; bottom: 0; width: 2px; background: var(--creme-fonce); }
.frise-item { position: relative; padding: 0 0 3rem 274px; }
.frise-item:last-child { padding-bottom: 0; }
.frise-annee { position: absolute; left: 0; top: -.3rem; width: 210px; text-align: right; font-family: var(--serif); font-size: 2.3rem; line-height: 1.15; color: var(--bordeaux); font-weight: 700; }
.frise-item::before {
  content: ""; position: absolute; left: 237px; top: .4rem; width: 16px; height: 16px;
  border-radius: 50%; background: var(--blanc); border: 3px solid var(--or);
}
.frise-item h3 { font-size: 1.75rem; margin-bottom: .5rem; }
.frise-item p { color: var(--gris); font-size: .98rem; }

/* =========================================================
   Étapes (projet) — numérotées
   ========================================================= */
.etapes { display: grid; gap: 1.4rem; }
.etape {
  display: grid; grid-template-columns: auto 1fr; gap: 1.8rem; align-items: start;
  background: var(--blanc); padding: 2rem; border-radius: 5px; border-left: 4px solid var(--or);
  box-shadow: var(--ombre-douce);
}
.etape-num { font-family: var(--serif); font-size: 3rem; color: var(--creme-fonce); line-height: 1; font-weight: 600; }
.etape h3 { font-size: 1.4rem; margin-bottom: .5rem; }
.etape p { color: var(--gris); }

/* =========================================================
   Cépages (puces)
   ========================================================= */
.cepages { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.cepage {
  background: var(--blanc); border: 1px solid var(--creme-fonce); border-radius: 50px;
  padding: .6rem 1.4rem; font-size: .9rem; color: var(--bordeaux); font-weight: 500;
  display: flex; align-items: center; gap: .5rem; transition: var(--transition);
}
.cepage:hover { border-color: var(--or); background: var(--creme); }
.cepage::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--or); }

/* =========================================================
   Appel à l'action
   ========================================================= */
.cta { background: var(--vert); color: var(--blanc); text-align: center; }
.cta h2 { color: var(--blanc); font-size: clamp(2rem, 4.5vw, 3rem); margin-bottom: 1rem; }
.cta p { max-width: 50ch; margin: 0 auto 2.2rem; color: rgba(255,255,255,.85); }

/* =========================================================
   Formulaire de contact
   ========================================================= */
.contact-grille { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(2rem, 6vw, 4.5rem); align-items: start; }
.formulaire { background: var(--blanc); padding: clamp(2rem, 4vw, 3rem); border-radius: 6px; box-shadow: var(--ombre); }
.champ { margin-bottom: 1.4rem; }
.champ label { display: block; font-size: .85rem; font-weight: 600; letter-spacing: .03em; margin-bottom: .5rem; color: var(--encre); }
.champ label .requis { color: var(--bordeaux); }
.champ input, .champ textarea, .champ select {
  width: 100%; padding: .85rem 1rem; border: 1.5px solid var(--creme-fonce);
  border-radius: 3px; font-family: var(--sans); font-size: .98rem; color: var(--encre);
  background: var(--creme); transition: var(--transition);
}
.champ input:focus, .champ textarea:focus, .champ select:focus {
  outline: none; border-color: var(--or); background: var(--blanc);
  box-shadow: 0 0 0 4px rgba(201, 164, 92, .15);
}
.champ textarea { resize: vertical; min-height: 140px; }
.champ-double { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.message-succes {
  display: none; background: #eef4ec; border: 1px solid #b8d4ad; color: #355a2a;
  padding: 1rem 1.2rem; border-radius: 4px; margin-bottom: 1.4rem; font-size: .95rem;
}
.message-succes.visible { display: block; }

.infos-contact { display: grid; gap: 1.6rem; }
.info-bloc { display: flex; gap: 1.1rem; align-items: flex-start; }
.info-bloc .ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--bordeaux); color: var(--or-clair); }
.info-bloc .ic svg { width: 22px; height: 22px; }
.info-bloc h4 { font-family: var(--sans); font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-bottom: .25rem; font-weight: 600; }
.info-bloc p { color: var(--encre); font-size: 1rem; }
.info-bloc a:hover { color: var(--bordeaux); }

.carte-plan {
  margin-top: .5rem; aspect-ratio: 16/10; border-radius: 6px; overflow: hidden;
  position: relative; box-shadow: var(--ombre-douce); background: var(--creme-fonce);
}
.carte-plan iframe { width: 100%; height: 100%; border: 0; display: block; }
.lien-maps { margin-top: 1rem; width: 100%; justify-content: center; }

/* =========================================================
   Page Presse
   ========================================================= */
.liste-presse { display: grid; gap: 1.5rem; max-width: 900px; margin-inline: auto; }
.article-presse {
  background: var(--blanc); border: 1px solid var(--creme-fonce); border-left: 4px solid var(--or);
  border-radius: 5px; padding: 1.8rem 2rem; box-shadow: var(--ombre-douce); transition: var(--transition);
}
.article-presse:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.article-presse .meta {
  display: flex; gap: .4rem 1.2rem; align-items: center; flex-wrap: wrap;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); margin-bottom: .55rem;
}
.article-presse .meta .source { color: var(--bordeaux); font-weight: 700; }
.article-presse h3 { font-size: 1.55rem; margin-bottom: .45rem; }
.article-presse h3 a { transition: var(--transition); }
.article-presse h3 a:hover { color: var(--or); }
.article-presse p { color: var(--gris); font-size: .97rem; }
.article-presse .lien-article {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: .85rem; font-weight: 600; color: var(--bordeaux); transition: var(--transition);
}
.article-presse .lien-article:hover { color: var(--or); }
.presse-vide { text-align: center; color: var(--gris); padding: 3rem 0; font-style: italic; }

/* =========================================================
   Page Agenda — calendrier mensuel
   ========================================================= */
.calendrier {
  max-width: 900px; margin-inline: auto; background: var(--blanc);
  border: 1px solid var(--creme-fonce); border-radius: 8px; padding: 1.6rem;
  box-shadow: var(--ombre-douce);
}
.calendrier-entete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; gap: 1rem; }
.calendrier-titre { font-family: var(--serif); font-size: 1.7rem; color: var(--bordeaux); font-weight: 600; text-transform: capitalize; }
.calendrier-nav { display: flex; gap: .5rem; }
.calendrier-nav button {
  width: 40px; height: 40px; border: 1.5px solid var(--creme-fonce); background: var(--creme);
  border-radius: 5px; font-size: 1.2rem; color: var(--bordeaux); cursor: pointer; transition: var(--transition);
}
.calendrier-nav button:hover { border-color: var(--or); background: var(--blanc); }
.calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.calendrier-jour-nom { text-align: center; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--gris); padding: .4rem 0; font-weight: 600; }
.calendrier-case {
  min-height: 86px; border: 1px solid var(--creme-fonce); border-radius: 5px;
  padding: .35rem .45rem; background: #fdfbf7; overflow: hidden;
}
.calendrier-case .numero { font-size: .8rem; color: var(--gris); font-weight: 600; }
.calendrier-case.hors-mois { opacity: .35; background: var(--creme); }
.calendrier-case.aujourdhui { outline: 2px solid var(--or); outline-offset: -2px; }
.calendrier-case.aujourdhui .numero { color: var(--bordeaux); }
.chip-evenement {
  display: block; width: 100%; text-align: left; font-size: .68rem; line-height: 1.3;
  background: var(--bordeaux); color: var(--blanc); border: none; border-radius: 3px;
  padding: .15rem .4rem; margin-top: .25rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: inherit;
}
.chip-evenement:hover { background: var(--or); color: var(--encre); }
.titre-mois-evenements { font-family: var(--serif); font-size: 1.6rem; color: var(--bordeaux); max-width: 900px; margin: 2.5rem auto 1.2rem; }
.evenement.surligne { outline: 2.5px solid var(--or); }
@media (max-width: 700px) {
  .calendrier { padding: .9rem; }
  .calendrier-case { min-height: 52px; padding: .2rem .3rem; }
  .chip-evenement { font-size: 0; padding: 0; height: 7px; width: 7px; border-radius: 50%; margin: .25rem auto 0; }
}

.liste-agenda { display: grid; gap: 1.5rem; max-width: 900px; margin-inline: auto; }
.evenement {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start;
  background: var(--blanc); border: 1px solid var(--creme-fonce); border-left: 4px solid var(--vert);
  border-radius: 5px; padding: 1.8rem 2rem; box-shadow: var(--ombre-douce); transition: var(--transition);
}
.evenement:hover { transform: translateY(-3px); box-shadow: var(--ombre); }
.evenement .date-bloc {
  min-width: 86px; text-align: center; background: var(--creme); border-radius: 6px;
  padding: .8rem .6rem; border: 1px solid var(--creme-fonce);
}
.evenement .date-bloc .jour { display: block; font-family: var(--serif); font-size: 2.1rem; font-weight: 700; color: var(--bordeaux); line-height: 1; }
.evenement .date-bloc .mois { display: block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--gris); margin-top: .3rem; }
.evenement .date-bloc .annee { display: block; font-size: .8rem; color: var(--gris); }
.evenement h3 { font-size: 1.5rem; margin-bottom: .4rem; }
.evenement .meta {
  display: flex; gap: .4rem 1.4rem; flex-wrap: wrap; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--gris); margin-bottom: .5rem;
}
.evenement .meta .lieu { color: var(--vert); font-weight: 700; }
.evenement p { color: var(--gris); font-size: .97rem; }
.evenement .lien-evenement {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: .9rem;
  font-size: .85rem; font-weight: 600; color: var(--bordeaux); transition: var(--transition);
}
.evenement .lien-evenement:hover { color: var(--or); }
.agenda-vide { text-align: center; color: var(--gris); padding: 3rem 0; font-style: italic; }
@media (max-width: 560px) { .evenement { grid-template-columns: 1fr; } .evenement .date-bloc { max-width: 110px; } }

/* =========================================================
   Pied de page
   ========================================================= */
.pied { background: var(--encre); color: rgba(255,255,255,.7); padding-top: 4rem; }
.pied-haut { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.pied .logo { color: var(--blanc); margin-bottom: 1.2rem; }
.pied-col h5 { font-family: var(--sans); color: var(--or-clair); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.2rem; }
.pied-col ul { list-style: none; display: grid; gap: .7rem; }
.pied-col a { font-size: .95rem; transition: var(--transition); }
.pied-col a:hover { color: var(--or-clair); }
.pied p.desc { font-size: .95rem; max-width: 32ch; }
.reseaux { display: flex; gap: .8rem; margin-top: 1.4rem; }
.reseaux a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: var(--transition); }
.reseaux a:hover { background: var(--or); border-color: var(--or); color: var(--encre); }
.reseaux svg { width: 18px; height: 18px; }
.pied-bas { display: flex; justify-content: space-between; align-items: center; padding: 1.8rem 0; font-size: .85rem; flex-wrap: wrap; gap: 1rem; }
.pied-liens a { color: rgba(255,255,255,.8); transition: var(--transition); }
.pied-liens a:hover { color: var(--or-clair); }

/* =========================================================
   Page Informations légales
   ========================================================= */
.legal { max-width: 800px; }
.legal article { margin-bottom: 2.6rem; }
.legal h2 { font-size: 1.5rem; margin-bottom: .9rem; }
.legal p { color: var(--gris); margin-bottom: .9rem; }
.legal p strong { color: var(--encre); }
.legal a { color: var(--bordeaux); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover { color: var(--or); }
.legal-maj { font-style: italic; font-size: .9rem; padding-top: 1rem; border-top: 1px solid var(--creme-fonce); }

/* =========================================================
   Animations au défilement
   ========================================================= */
.reveler {
  opacity: 0; transform: translateY(60px) scale(.95);
  transition: opacity .8s cubic-bezier(.16,.84,.44,1),
              transform .9s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveler.visible { opacity: 1; transform: none; }

/* Apparition (et disparition) en cascade des éléments d'une même rangée */
.grille-cartes > .reveler:nth-child(2),
.chiffres .grille > .reveler:nth-child(2),
.etapes > .reveler:nth-child(2),
.frise > .reveler:nth-child(2) { transition-delay: .1s; }
.grille-cartes > .reveler:nth-child(3),
.chiffres .grille > .reveler:nth-child(3),
.etapes > .reveler:nth-child(3),
.frise > .reveler:nth-child(3) { transition-delay: .2s; }
.grille-cartes > .reveler:nth-child(4),
.chiffres .grille > .reveler:nth-child(4),
.etapes > .reveler:nth-child(4),
.frise > .reveler:nth-child(4) { transition-delay: .3s; }
.etapes > .reveler:nth-child(5),
.frise > .reveler:nth-child(5) { transition-delay: .4s; }
.frise > .reveler:nth-child(6) { transition-delay: .5s; }
.frise > .reveler:nth-child(7) { transition-delay: .6s; }

@media (prefers-reduced-motion: reduce) {
  .reveler { transition: opacity .4s ease; transform: none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 880px) {
  .nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center;
    background: var(--creme); transform: translateX(100%); transition: var(--transition); gap: 2rem;
  }
  body.menu-ouvert .nav { transform: none; }
  .nav a { color: var(--encre) !important; font-size: 1.4rem; font-family: var(--serif); }
  .btn-menu { display: block; }
  .hero:has(.hero-bordeaux) .conteneur { max-width: none; width: min(1180px, 92%); margin-inline: auto; }
  .duo { grid-template-columns: 1fr; }
  .duo.inverse .duo-visuel { order: 0; }
  .duo-visuel { aspect-ratio: 16/11; }
  .chiffres .grille { gap: 1.5rem .6rem; }
  .chiffre-lib { font-size: .66rem; letter-spacing: .06em; }
  .contact-grille { grid-template-columns: 1fr; }
  .pied-haut { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .frise::before { left: 8px; }
  .frise-item { padding-left: 44px; }
  .frise-annee { position: static; width: auto; text-align: left; margin-bottom: .3rem; }
  .frise-item::before { left: 1px; }
  .champ-double { grid-template-columns: 1fr; }
  .pied-haut { grid-template-columns: 1fr; }
  .pied-bas { flex-direction: column; text-align: center; }
  .etape { grid-template-columns: 1fr; gap: .5rem; }
  .logo-marque { font-size: 1.6rem; }
  .logo-marque small { font-size: .68rem; letter-spacing: .24em; }
  .logo svg, .logo img { width: 42px; height: 42px; }
}