/* ==========================================================
   NouVoilà — feuille de style
   Couleurs, polices et composants communs à toutes les pages
   ========================================================== */

/* Polices hébergées sur le site (aucune donnée envoyée à un tiers) */
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/bodoni-moda-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Bodoni Moda"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/bodoni-moda-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 300; font-display: swap; src: url("../fonts/jost-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-latin-500-normal.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --vert: #12332B;
  --vert-2: #1B4238;
  --vert-ligne: #2C4A41;
  --creme: #FBF8F2;
  --creme-2: #F1EADC;
  --blanc: #FFFFFF;
  --or: #C9A45C;
  --or-texte: #7A5C24;
  --encre: #1F2A26;
  --gris: #4E5A55;
  --ligne: #E2D9C8;
  --ligne-2: #D6CBB6;
  --clair: #F2EBDF;
  --clair-2: #E3DCCD;
  --clair-3: #CFC6B4;
  --serif: "Bodoni Moda", "Didot", Georgia, serif;
  --sans: "Jost", "Futura", "Century Gothic", "Avenir", sans-serif;
  --largeur: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--sans); font-size: 1.0625rem; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert); text-underline-offset: 3px; }
a:hover { color: var(--or-texte); }
:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; margin: 0; color: var(--vert); }
h1 em, h2 em, h3 em { font-style: italic; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }
.lien-evitement { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--or); color: var(--vert); padding: 10px 16px; font-weight: 500; }
.lien-evitement:focus { top: 12px; }
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Boutons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 26px; border-radius: 2px; border: 1px solid transparent; font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0.04em; text-decoration: none; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s; }
.btn-or { background: var(--or); color: var(--vert); }
.btn-or:hover { background: #D8B46C; color: var(--vert); }
.btn-vert { background: var(--vert); color: var(--clair); }
.btn-vert:hover { background: var(--vert-2); color: var(--blanc); }
.btn-contour-clair { border-color: #8FA79E; color: var(--clair); }
.btn-contour-clair:hover { border-color: var(--or); color: var(--blanc); }
.btn-contour-or { border-color: var(--or); color: var(--clair); }
.btn-contour-or:hover { background: var(--or); color: var(--vert); }
.btn-contour { border-color: var(--vert); color: var(--vert); }
.btn-contour:hover { background: var(--vert); color: var(--clair); }
.lien-fleche { display: inline-block; font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--vert); }
.lien-fleche::after { content: " ›"; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--vert); color: var(--clair); border-bottom: 1px solid var(--vert-ligne); }
.entete-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; min-height: 76px; }
.logo { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: var(--clair); }
.logo:hover { color: var(--blanc); }
.logo-nom { font-family: var(--serif); font-size: 1.85rem; line-height: 1; }
.logo-sous { font-size: .6875rem; letter-spacing: .26em; text-transform: uppercase; color: var(--or); }
.menu { display: flex; align-items: center; gap: 28px; }
.menu ul { display: flex; flex-wrap: wrap; gap: 4px 22px; list-style: none; }
.menu a:not(.btn) { display: inline-block; padding: 10px 0; color: var(--clair); text-decoration: none; letter-spacing: .03em; border-bottom: 1px solid transparent; }
.menu a:not(.btn):hover { color: var(--or); }
.menu a[aria-current="page"] { color: var(--or); border-bottom-color: var(--or); }
.menu-bouton { display: none; min-height: 46px; padding: 0 18px; background: transparent; color: var(--clair); border: 1px solid #8FA79E; border-radius: 2px; font-family: var(--sans); font-size: .9375rem; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }

@media (max-width: 1020px) {
  .js .menu-bouton { display: inline-flex; align-items: center; }
  .js .menu { display: none; }
  .js .entete.menu-ouvert .menu { display: flex; }
  .entete-inner { flex-wrap: wrap; }
  .menu { flex-direction: column; align-items: stretch; width: 100%; gap: 16px; padding: 8px 0 24px; }
  .menu ul { flex-direction: column; gap: 0; }
  .menu a:not(.btn) { display: block; padding: 14px 0; border-bottom: 1px solid var(--vert-ligne); font-size: 1.125rem; }
  .menu a[aria-current="page"] { border-bottom-color: var(--vert-ligne); }
}

/* ---------- Sections ---------- */
.section { padding: 96px 0; }
.section-alt { background: var(--creme-2); }
.section-sombre { background: var(--vert); color: var(--clair); }
.section-sombre h2, .section-sombre h3 { color: var(--clair); }
.section-sombre h2 em { color: var(--or); }
.section-serree { padding: 64px 0; }
.surtitre { margin-bottom: 14px; font-size: .8125rem; letter-spacing: .28em; text-transform: uppercase; color: var(--or-texte); }
.section-sombre .surtitre, .hero .surtitre { color: var(--or); }
.titre-section { font-size: clamp(2rem, 1.3rem + 2.4vw, 2.9rem); max-width: 820px; }
.intro { margin-top: 18px; max-width: 700px; font-size: 1.125rem; color: var(--gris); }
.section-sombre .intro, .texte-clair { color: var(--clair-2); font-weight: 300; }
.deux-colonnes { display: flex; flex-wrap: wrap; gap: 48px 64px; align-items: center; }
.deux-colonnes > * { flex: 1 1 420px; min-width: 0; }
.aligne-haut { align-items: flex-start; }

/* ---------- Bandeau d'ouverture ---------- */
.hero { background: var(--vert); color: var(--clair); padding: 80px 0 96px; }
.hero h1 { color: var(--clair); font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4.4rem); line-height: 1.03; }
.hero h1 em { color: var(--or); }
.hero .chapo { margin-top: 26px; max-width: 580px; font-size: 1.1875rem; font-weight: 300; color: var(--clair-2); }
.hero-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; }
.hero-texte { flex: 1 1 520px; min-width: 0; }
.hero-cote { flex: 1 1 360px; min-width: 0; max-width: 460px; }
.hero-photo { position: relative; overflow: hidden; background: var(--vert); padding: 112px 0 128px; }
.hero-photo::before { content: ""; position: absolute; inset: 0; background: url("../images/hero.jpg") center / cover no-repeat; animation: respirer 22s ease-in-out infinite alternate; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18,51,43,.95) 0%, rgba(18,51,43,.86) 55%, rgba(18,51,43,.6) 100%); }
.hero-photo > .conteneur { position: relative; z-index: 1; }
@keyframes respirer { from { transform: scale(1.03); } to { transform: scale(1.13); } }
@media (max-width: 800px) {
  .hero-photo { padding: 72px 0 88px; }
  .hero-photo::before { background-image: url("../images/hero-1000.jpg"); }
  .hero-photo::after { background: rgba(18,51,43,.9); }
}
.hero-photo .hero-texte { max-width: 760px; }
.hero-court { padding: 64px 0 72px; }
.hero-court h1 { font-size: clamp(2.4rem, 1.4rem + 3.6vw, 3.8rem); }
.cadre-photo { border: 1px solid var(--or); padding: 12px; }
.cadre-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Cartes ---------- */
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; margin-top: 44px; }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.carte { display: flex; flex-direction: column; gap: 12px; padding: 32px 28px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 2px; color: var(--encre); }
.carte { transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.carte:hover { transform: translateY(-6px); border-color: var(--or); box-shadow: 0 26px 48px -24px rgba(18,51,43,.42); }
a.carte { text-decoration: none; }
a.carte:hover { color: var(--encre); transform: translateY(-8px); }
a.carte:hover h3 { color: var(--or-texte); }
.carte h3 { transition: color .3s; }
.carte h3 { font-size: 1.75rem; }
.carte p { color: var(--gris); }
.carte .lien-fleche { margin-top: auto; padding-top: 6px; }
.carte-sombre { background: var(--vert); border-color: var(--or); color: var(--clair); }
.carte-sombre h3 { color: var(--clair); }
.carte-sombre p { color: var(--clair-2); }
.carte-sombre .surtitre { color: var(--or); }
.numero { font-family: var(--serif); font-style: italic; font-size: 1.6rem; line-height: 1; color: var(--or-texte); }

/* Étapes */
.etapes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 32px; margin-top: 48px; list-style: none; }
.etapes li { border-top: 1px solid var(--vert); padding-top: 20px; }
.etapes .numero { font-size: 2.8rem; }
.etapes h3 { margin: 14px 0 6px; font-family: var(--sans); font-size: 1.25rem; font-weight: 500; }
.etapes p { color: var(--gris); }

/* Listes en lignes */
.lignes { list-style: none; }
.lignes li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 20px; flex-wrap: wrap; padding: 18px 0; border-bottom: 1px solid var(--ligne); }
.section-alt .lignes li { border-color: var(--ligne-2); }
.lignes .nom { font-family: var(--serif); font-size: 1.4rem; color: var(--vert); }
.lignes .detail { color: var(--gris); font-size: .9375rem; text-align: right; }
.liste-num { list-style: none; }
.liste-num li { display: flex; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--ligne); }
.section-alt .liste-num li { border-color: var(--ligne-2); }
.liste-num .numero { width: 34px; flex-shrink: 0; font-size: 1.4rem; }
.liste-num h3 { margin-bottom: 4px; font-family: var(--sans); font-size: 1.1875rem; font-weight: 500; }
.liste-num p { color: var(--gris); }
.deux-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 0 48px; margin-top: 36px; }
@media (max-width: 460px) { .deux-listes { grid-template-columns: 1fr; } }

/* Coches */
.coches { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.coches li { position: relative; padding-left: 28px; }
.coches li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 12px; height: 7px; border-left: 2px solid var(--or-texte); border-bottom: 2px solid var(--or-texte); transform: rotate(-45deg); }
.carte-sombre .coches li::before { border-color: var(--or); }

/* Encart crédit d'impôt */
.carte-sap { background: var(--creme); color: var(--encre); border: 1px solid var(--or); padding: 34px; display: flex; flex-direction: column; gap: 14px; }
.carte-sap .titre { font-family: var(--serif); font-size: 1.9rem; line-height: 1.1; color: var(--vert); }
.carte-sap p { color: var(--gris); }
.carte-sap .surtitre { margin-bottom: 0; color: var(--or-texte); }
.exemple { background: var(--creme-2); padding: 16px 18px; }
.exemple strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.25; color: var(--vert); }
.note { font-size: .875rem; color: var(--gris); padding-top: 12px; border-top: 1px solid var(--ligne); }

/* Compte rendu exemple */
.compte-rendu { background: var(--blanc); border: 1px solid var(--ligne); padding: 32px; }
.compte-rendu .titre { margin: 4px 0 18px; font-family: var(--serif); font-size: 1.5rem; color: var(--vert); }

/* Bandeau d'appel à l'action */
.bandeau { background: var(--vert); color: var(--clair); padding: 52px 48px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.bandeau h2 { color: var(--clair); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.5rem); }
.bandeau h2 em { color: var(--or); }
.bandeau p { margin-top: 12px; color: var(--clair-2); font-weight: 300; font-size: 1.125rem; }
.bandeau > div { flex: 1 1 480px; min-width: 0; }
.bandeau .surtitre { color: var(--or); }
.bandeau-or { background: var(--or); color: var(--vert); }
@media (max-width: 600px) { .bandeau { padding: 40px 24px; } }

/* Prix */
.prix-grand { margin-top: 18px; font-family: var(--serif); font-size: 1.7rem; color: var(--clair); }
.formule .montant { font-family: var(--serif); font-size: 3rem; line-height: 1; color: var(--vert); }
.carte-sombre .montant { color: var(--clair); }
.formule .base { font-size: .9375rem; color: var(--gris); }
.carte-sombre .base { color: var(--clair-3); }
.tarifs-unite { list-style: none; }
.tarifs-unite li { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ligne); }
.tarifs-unite li:last-child { border-bottom: 0; }
.tarifs-unite .prix { font-family: var(--serif); font-size: 1.2rem; color: var(--vert); white-space: nowrap; }
.puces-onglets { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.mention { margin-top: 20px; font-size: .9375rem; color: var(--gris); }

/* Pastilles de communes */
.pastilles { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin-top: 26px; }
.pastilles li { background: var(--blanc); border: 1px solid var(--ligne); padding: 8px 16px; }

/* Encadré sobre */
.encadre { background: var(--blanc); border: 1px solid var(--ligne); padding: 30px 34px; display: flex; flex-wrap: wrap; gap: 10px 32px; align-items: baseline; }
.encadre h2, .encadre h3 { font-size: 1.5rem; }
.encadre p { flex: 1 1 460px; min-width: 0; color: var(--gris); }

/* Photo de l'équipe */
.photo-equipe { border: 1px solid var(--or); padding: 12px; background: var(--blanc); }
.photo-equipe img { width: 100%; aspect-ratio: 1200 / 802; object-fit: cover; }
.photo-equipe figcaption { padding: 12px 4px 2px; font-size: .875rem; color: var(--gris); }

/* FAQ */
.faq-groupe { margin-top: 48px; }
.faq-groupe h2 { font-size: 1.9rem; margin-bottom: 8px; }
.faq details { border-bottom: 1px solid var(--ligne-2); }
.faq summary { list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative; font-size: 1.1875rem; font-weight: 500; color: var(--vert); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-family: var(--serif); font-size: 1.8rem; color: var(--or-texte); }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 22px; color: var(--gris); max-width: 820px; }

/* ---------- Formulaire ---------- */
.formulaire { background: var(--blanc); border: 1px solid var(--ligne); padding: 36px; display: flex; flex-direction: column; gap: 22px; }
.formulaire fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.formulaire legend { padding: 0 0 6px; font-family: var(--serif); font-size: 1.45rem; color: var(--vert); }
.champs { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label, .groupe-titre { font-weight: 500; }
.champ input, .champ select, .champ textarea { width: 100%; padding: 13px 14px; border: 1px solid #B8AE9C; border-radius: 2px; background: var(--blanc); color: var(--encre); font: inherit; font-size: 1rem; }
.champ textarea { resize: vertical; min-height: 130px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--vert); }
.obligatoire { color: var(--or-texte); }
.cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 16px; }
.case { display: flex; gap: 10px; align-items: flex-start; }
.case input { margin-top: 4px; width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--vert); }
.consentement { font-size: .9375rem; color: var(--gris); }
.piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.message-erreur { padding: 14px 16px; background: #FBEDEA; border: 1px solid #C9897C; color: #6E2A1E; }
.message-erreur[hidden] { display: none; }
.formulaire button { align-self: flex-start; }
.contact-infos { display: flex; flex-direction: column; gap: 18px; }
.contact-infos .libelle { font-size: .8125rem; letter-spacing: .2em; text-transform: uppercase; color: var(--or-texte); }
.contact-infos .valeur { font-family: var(--serif); font-size: 1.5rem; }
.contact-infos .valeur a { text-decoration: none; }

/* Mentions légales */
.texte-long { max-width: 820px; }
.texte-long h2 { font-size: 1.8rem; margin: 44px 0 12px; }
.texte-long p, .texte-long li { color: var(--gris); }
.texte-long p + p { margin-top: 12px; }
.texte-long ul { padding-left: 20px; margin-top: 10px; }
.a-completer { background: #FFF3D6; color: #6B4A10; padding: 0 4px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--vert); color: var(--clair-3); padding: 64px 0 40px; font-size: .9375rem; }
.pied a { color: var(--clair); text-decoration: none; }
.pied a:hover { color: var(--or); }
.pied-colonnes { display: flex; flex-wrap: wrap; gap: 36px; }
.pied-marque { flex: 2 1 260px; min-width: 0; }
.pied-marque p:last-child { margin-top: 10px; max-width: 330px; }
.pied-logo { font-family: var(--serif); font-size: 1.9rem; color: var(--clair); }
.pied-col { flex: 1 1 170px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pied-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pied-titre { font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--or); }
.pied-legal { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--vert-ligne); font-size: .8125rem; }

/* ---------- Barre mobile ---------- */
.barre-mobile { display: none; }
@media (max-width: 760px) {
  .barre-mobile { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--vert); border-top: 1px solid var(--vert-ligne); }
  .barre-mobile .btn { min-height: 48px; padding: 0 12px; }
  body { padding-bottom: 78px; }
  .section { padding: 72px 0; }
  .formulaire { padding: 26px 20px; }
  .lignes .detail { text-align: left; }
}

/* ==========================================================
   Mouvement : survols, ombres, apparitions
   ========================================================== */
.btn { transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -12px rgba(0,0,0,.45); }
.btn:active { transform: translateY(0); box-shadow: none; }
.lien-fleche::after { display: inline-block; transition: transform .25s; }
.lien-fleche:hover::after, a.carte:hover .lien-fleche::after { transform: translateX(5px); }
.entete { transition: box-shadow .3s; }
.entete.defile { box-shadow: 0 12px 30px -14px rgba(0,0,0,.55); }

.photo-equipe, .cadre-photo { box-shadow: 0 34px 60px -34px rgba(18,51,43,.5); transition: box-shadow .5s, transform .5s; }
.photo-equipe { overflow: hidden; }
.cadre-photo { overflow: hidden; }
.photo-equipe img, .cadre-photo img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.photo-equipe:hover img, .cadre-photo:hover img { transform: scale(1.05); }
.photo-equipe:hover, .cadre-photo:hover { box-shadow: 0 40px 70px -32px rgba(18,51,43,.6); }

.compte-rendu, .carte-sap, .formulaire, .encadre { box-shadow: 0 26px 52px -34px rgba(18,51,43,.42); }
.compte-rendu .coches li { transition: transform .3s; }
.compte-rendu .coches li:hover { transform: translateX(4px); }

.bandeau { background: radial-gradient(circle at 100% 0%, rgba(201,164,92,.22), transparent 46%), var(--vert); box-shadow: 0 34px 60px -36px rgba(18,51,43,.7); }
.section-sombre { background: radial-gradient(circle at 0% 100%, rgba(201,164,92,.14), transparent 40%), var(--vert); }
.hero:not(.hero-photo) { background: radial-gradient(circle at 92% 8%, rgba(201,164,92,.16), transparent 42%), var(--vert); }

.etapes li { transition: border-color .3s; }
.etapes li:hover { border-top-color: var(--or); }
.etapes .numero { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.etapes li:hover .numero { transform: translateX(8px); }
.liste-num li .numero, .lignes .nom { transition: transform .3s, color .3s; }
.liste-num li:hover .numero { transform: translateX(4px); }
.lignes li:hover .nom { color: var(--or-texte); }
.faq summary { transition: color .25s; }
.faq summary:hover { color: var(--or-texte); }

.pastilles li { transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.pastilles li[data-commune] { cursor: default; }
.pastilles li:hover, .pastilles li.actif { background: var(--vert); color: var(--clair); border-color: var(--vert); transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(18,51,43,.6); }

/* Entrée du bandeau d'ouverture */
@keyframes monter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.hero .surtitre, .hero h1, .hero .chapo, .hero .actions, .hero .puces-onglets, .hero-cote { animation: monter .9s cubic-bezier(.2,.7,.2,1) both; }
.hero h1 { animation-delay: .1s; }
.hero .chapo { animation-delay: .25s; }
.hero .actions, .hero .puces-onglets { animation-delay: .4s; }
.hero-cote { animation-delay: .35s; }

/* Apparition au défilement (activée par le script) */
.apparition { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
.apparition.visible { opacity: 1; transform: none; }

/* ==========================================================
   Carte de la zone d'intervention
   ========================================================== */
.zone-grille { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 48px 56px; align-items: start; }
.zone-grille-accueil { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; }
@media (max-width: 920px) { .zone-grille, .zone-grille-accueil { grid-template-columns: 1fr; } }
.zone-secteurs > div + div { margin-top: 28px; }
.zone-secteurs h2 { font-size: 1.6rem; }
.zone-secteurs p { color: var(--gris); }
.zone-secteurs .pastilles { margin-top: 12px; }
.carte-zone-cadre { margin: 0; background: var(--blanc); border: 1px solid var(--ligne); padding: 18px 18px 12px; box-shadow: 0 34px 64px -36px rgba(18,51,43,.5); }
.carte-zone-cadre figcaption { padding: 8px 4px 0; font-size: .875rem; color: var(--gris); }
.carte-zone { display: block; width: 100%; height: auto; font-family: var(--sans); }
.carte-zone .anneaux circle { fill: none; stroke: var(--ligne-2); stroke-width: 1.2; stroke-dasharray: 3 7; }
.carte-zone .anneaux text { font-size: 13px; letter-spacing: .12em; fill: var(--gris); paint-order: stroke; stroke: rgba(255,255,255,.95); stroke-width: 5px; stroke-linejoin: round; }
.carte-zone .secteur-trait { fill: none; stroke: var(--or); stroke-width: 2.5; stroke-dasharray: 10 7; animation: defiler 40s linear infinite; }
@keyframes defiler { to { stroke-dashoffset: -680; } }
.carte-zone .riviere { fill: none; stroke: #A9C9C5; stroke-width: 6; stroke-linecap: round; }
.carte-zone .riviere-fine { stroke-width: 3.5; }
.carte-zone .riviere-nom { font-family: var(--serif); font-style: italic; font-size: 15px; letter-spacing: .08em; fill: #3F6E69; }
.carte-zone .ville-zone { fill: rgba(18,51,43,.08); stroke: rgba(18,51,43,.25); transition: fill .3s; }
.carte-zone .ville-point { fill: var(--vert); }
.carte-zone .ville-centre text { font-family: var(--serif); font-size: 26px; fill: var(--vert); }
.carte-zone .ville-centre:hover .ville-zone, .carte-zone .ville-centre.actif .ville-zone { fill: rgba(201,164,92,.3); }
.carte-zone .commune text { font-size: 14px; fill: var(--encre); paint-order: stroke; stroke: rgba(255,255,255,.92); stroke-width: 4px; stroke-linejoin: round; transition: fill .25s; }
.carte-zone .commune .point { fill: var(--vert); stroke: #FFFFFF; stroke-width: 2; transform-box: fill-box; transform-origin: center; transition: transform .35s cubic-bezier(.2,.7,.2,1.5), fill .25s; }
.carte-zone .commune .halo { fill: var(--or); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .35s, transform .35s; }
.carte-zone .commune:hover .point, .carte-zone .commune.actif .point { transform: scale(1.7); fill: var(--or); }
.carte-zone .commune:hover .halo, .carte-zone .commune.actif .halo { opacity: .28; transform: scale(2.6); }
.carte-zone .commune:hover text, .carte-zone .commune.actif text { fill: var(--vert); font-weight: 500; }
.carte-zone .commune-base .point { fill: var(--or); stroke: var(--vert); stroke-width: 2.5; }
.carte-zone .commune-base .halo { animation: pulsation 2.6s ease-out infinite; }
@keyframes pulsation { 0% { opacity: .5; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.carte-zone .commune-base text { font-size: 15px; font-weight: 500; fill: var(--vert); }
.carte-zone .commune-base .mention-base { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; fill: var(--or-texte); }
.carte-zone .boussole circle { fill: var(--blanc); stroke: var(--ligne-2); }
.carte-zone .boussole path { fill: var(--vert); }
.carte-zone .boussole text { font-size: 10px; letter-spacing: .1em; fill: var(--gris); }
.carte-zone .echelle line { stroke: var(--vert); stroke-width: 2; }
.carte-zone .echelle text { font-size: 13px; fill: var(--gris); }
@media (max-width: 620px) {
  .carte-zone-cadre { padding: 10px 8px 12px; }
  .carte-zone { overflow: visible; }
  .carte-zone .commune text { font-size: 21px; stroke-width: 6px; display: none; }
  .carte-zone .commune.cle text, .carte-zone .commune.actif text { display: inline; }
  .carte-zone .commune-base text { font-size: 22px; }
  .carte-zone .commune-base .mention-base { font-size: 15px; transform: translateY(9px); }
  .carte-zone .ville-centre text { font-size: 34px; }
  .carte-zone .anneaux text, .carte-zone .echelle text { font-size: 19px; }
  .carte-zone .riviere-nom { font-size: 21px; }
  .carte-zone .boussole text { font-size: 14px; }
}

/* ==========================================================
   Arguments chiffrés : accueil, chiffres, comparatifs, calculs
   ========================================================== */

/* Accueil : choix du profil dans le bandeau d'ouverture */
.hero-accueil .hero-inner { align-items: center; gap: 48px 64px; }
.hero-accueil .hero-texte { flex: 1 1 540px; }
.profils-bloc { flex: 1 1 360px; max-width: 450px; }
.profils-titre { margin-bottom: 14px; font-size: .8125rem; letter-spacing: .28em; text-transform: uppercase; color: var(--clair-3); }
.profils { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.profils a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(201,164,92,.38); color: var(--clair); text-decoration: none; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color .3s, border-color .3s, transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s; }
.profils .qui { display: block; font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--or); }
.profils .quoi { display: block; margin-top: 5px; font-family: var(--serif); font-size: 1.32rem; line-height: 1.2; }
.profils .fleche { flex-shrink: 0; font-size: 1.3rem; color: var(--or); transition: transform .3s; }
.profils a:hover, .profils a:focus-visible { background: rgba(255,255,255,.13); border-color: var(--or); color: var(--blanc); transform: translateX(6px); box-shadow: 0 20px 40px -22px rgba(0,0,0,.7); }
.profils a:hover .fleche { transform: translateX(5px); }
.preuves { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 30px; font-size: .9375rem; color: var(--clair-2); }
.preuves li { position: relative; padding-left: 24px; }
.preuves li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 11px; height: 6px; border-left: 2px solid var(--or); border-bottom: 2px solid var(--or); transform: rotate(-45deg); }
@media (max-width: 760px) {
  .hero-accueil .actions { display: none; }
  .hero-accueil { padding-top: 56px; }
}
@media (max-width: 800px) {
  .profils a { padding: 14px 18px; }
  .profils .quoi { font-size: 1.15rem; }
  .profils-bloc { max-width: none; }
}

/* Chiffre mis en avant dans une carte */
.carte-chiffre { margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--ligne); color: var(--gris); font-size: .9375rem; }
.carte-chiffre strong { display: block; margin-bottom: 4px; font-family: var(--serif); font-weight: 400; font-size: 1.9rem; line-height: 1.05; color: var(--or-texte); }
.mini-source { display: block; margin-top: 6px; font-size: .75rem; letter-spacing: .04em; color: #6B746F; }

/* Grille de chiffres */
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; margin-top: 44px; }
.chiffre-carte { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 32px 26px 24px; background: var(--blanc); border: 1px solid var(--ligne); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.chiffre-carte::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--or), rgba(201,164,92,0)); transform: scaleX(.3); transform-origin: left; transition: transform .7s cubic-bezier(.2,.7,.2,1); }
.chiffre-carte:hover { transform: translateY(-6px); border-color: var(--or); box-shadow: 0 26px 48px -26px rgba(18,51,43,.5); }
.chiffre-carte:hover::before { transform: scaleX(1); }
.chiffre-valeur { font-family: var(--serif); font-size: clamp(2.4rem, 1.9rem + 1.8vw, 3.3rem); line-height: 1; color: var(--vert); font-variant-numeric: tabular-nums; }
.chiffre-valeur small { font-size: .5em; letter-spacing: .02em; }
.chiffre-texte { color: var(--encre); }
.chiffre-source { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--ligne); font-size: .8125rem; color: var(--gris); }
.section-sombre .chiffre-carte { background: rgba(255,255,255,.045); border-color: var(--vert-ligne); }
.section-sombre .chiffre-carte:hover { border-color: var(--or); box-shadow: 0 26px 48px -26px rgba(0,0,0,.6); }
.section-sombre .chiffre-valeur { color: var(--or); }
.section-sombre .chiffre-texte { color: var(--clair); font-weight: 300; }
.section-sombre .chiffre-source { color: var(--clair-3); border-color: var(--vert-ligne); }

/* Encart chiffre isolé */
.chiffre-encart { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; margin-top: 40px; padding: 30px 34px; background: var(--blanc); border: 1px solid var(--ligne); border-left: 4px solid var(--or); box-shadow: 0 26px 52px -34px rgba(18,51,43,.42); }
.chiffre-encart .chiffre-valeur { flex: 0 0 auto; }
.chiffre-encart > p:last-child { flex: 1 1 420px; min-width: 0; color: var(--gris); }

/* Comparatif « sans nous / avec nous » */
.comparatif { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 44px; align-items: stretch; }
.comparatif > div { display: flex; flex-direction: column; padding: 36px 32px; border: 1px solid var(--ligne); background: var(--blanc); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.comparatif h3 { font-size: 1.7rem; }
.comparatif .total { margin-top: 18px; font-family: var(--serif); font-size: clamp(1.8rem, 1.5rem + 1vw, 2.3rem); line-height: 1.1; color: var(--vert); }
.comparatif .sous-total { margin: 6px 0 22px; padding-bottom: 20px; border-bottom: 1px solid var(--ligne); font-size: .9375rem; color: var(--gris); }
.comparatif-eux { background: var(--creme) !important; }
.comparatif-eux .total { color: #8A4A3A; }
.comparatif-nous { background: var(--vert) !important; border-color: var(--or) !important; color: var(--clair); box-shadow: 0 34px 60px -32px rgba(18,51,43,.75); }
.comparatif-nous h3, .comparatif-nous .total { color: var(--clair); }
.comparatif-nous .total { color: var(--or); }
.comparatif-nous .surtitre { color: var(--or); }
.comparatif-nous .sous-total { color: var(--clair-3); border-color: var(--vert-ligne); }
.comparatif-nous .coches li::before { border-color: var(--or); }
.comparatif > div:hover { transform: translateY(-6px); }
.croix { list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--gris); }
.croix li { position: relative; padding-left: 28px; }
.croix li::before, .croix li::after { content: ""; position: absolute; left: 3px; top: .72em; width: 13px; height: 2px; background: #A25A48; transform: rotate(45deg); }
.croix li::after { transform: rotate(-45deg); }

/* Une semaine type */
.semaine { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-top: 44px; counter-reset: jour; }
.semaine li { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; background: var(--blanc); border: 1px solid var(--ligne); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s, border-color .4s; }
.semaine li:hover { transform: translateY(-6px); border-color: var(--or); box-shadow: 0 24px 44px -26px rgba(18,51,43,.45); }
.semaine .quand { font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-texte); }
.semaine .temps { align-self: flex-start; margin-top: auto; padding: 4px 12px; background: var(--creme-2); font-family: var(--serif); font-size: 1.15rem; color: var(--vert); }
.bilan-semaine { display: flex; flex-wrap: wrap; gap: 20px 56px; margin-top: 20px; padding: 30px 34px; background: radial-gradient(circle at 100% 0%, rgba(201,164,92,.22), transparent 50%), var(--vert); color: var(--clair-2); box-shadow: 0 34px 60px -36px rgba(18,51,43,.7); }
.bilan-semaine p { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.bilan-valeur { font-family: var(--serif); font-size: clamp(2rem, 1.6rem + 1.4vw, 2.8rem); line-height: 1.05; color: var(--or); }
.bilan-semaine p:last-child .bilan-valeur { color: var(--clair); text-decoration: line-through; text-decoration-color: rgba(201,164,92,.7); text-decoration-thickness: 2px; }

/* Calculateurs */
.calculateur { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); margin-top: 40px; background: var(--blanc); border: 1px solid var(--ligne); box-shadow: 0 34px 64px -38px rgba(18,51,43,.55); color: var(--encre); }
.calc-entree { display: flex; flex-direction: column; gap: 12px; padding: 36px 34px; }
.calc-libelle { padding: 0; font-family: var(--sans); font-size: .8125rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--or-texte); }
.calc-valeur { font-family: var(--serif); font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; color: var(--vert); font-variant-numeric: tabular-nums; }
.calc-valeur span { font-size: .4em; font-family: var(--sans); color: var(--gris); letter-spacing: .02em; }
.calc-aide { font-size: .9375rem; color: var(--gris); }
.calculateur input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 8px; margin: 16px 0 8px; border-radius: 4px; background: linear-gradient(90deg, var(--or) var(--rempli, 50%), var(--ligne) var(--rempli, 50%)); cursor: pointer; }
.calculateur input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border-radius: 50%; background: var(--vert); border: 3px solid var(--or); box-shadow: 0 6px 16px -4px rgba(18,51,43,.55); transition: transform .2s; }
.calculateur input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--vert); border: 3px solid var(--or); box-shadow: 0 6px 16px -4px rgba(18,51,43,.55); }
.calculateur input[type="range"]:hover::-webkit-slider-thumb, .calculateur input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.calc-resultats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 26px 24px; align-content: center; padding: 36px 34px; background: radial-gradient(circle at 100% 0%, rgba(201,164,92,.2), transparent 55%), var(--vert); color: var(--clair-2); }
.calc-resultats .valeur { display: block; font-family: var(--serif); font-size: clamp(1.9rem, 1.5rem + 1.3vw, 2.6rem); line-height: 1.05; color: var(--or); font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-resultats .libelle { display: block; margin-top: 6px; font-size: .9375rem; }
.calc-note { grid-column: 1 / -1; padding: 16px 34px; border-top: 1px solid var(--ligne); font-size: .875rem; color: var(--gris); }
.paliers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.insecable { white-space: nowrap; }
.paliers li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; padding: 10px 14px; border: 1px solid var(--ligne-2); font-size: .8125rem; color: var(--gris); transition: background-color .3s, border-color .3s, color .3s, transform .3s; }
.paliers strong { font-family: var(--serif); font-weight: 400; font-size: 1.35rem; color: var(--vert); }
.paliers li.actif { background: var(--vert); border-color: var(--vert); color: var(--clair-2); transform: translateY(-2px); }
.paliers li.actif strong { color: var(--or); }
.choix-formule { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 0; padding: 0; border: 0; }
.choix-formule legend { margin-bottom: 10px; }
.choix-formule label { flex: 1 1 150px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--ligne-2); cursor: pointer; transition: border-color .25s, background-color .25s; }
.choix-formule label:has(input:checked) { border-color: var(--vert); background: var(--creme); }
.choix-formule input { width: 18px; height: 18px; accent-color: var(--vert); }
.section-sombre .calculateur .calc-libelle { color: var(--or-texte); }
@media (max-width: 760px) {
  .calculateur { grid-template-columns: 1fr; }
  .calc-entree, .calc-resultats { padding: 28px 22px; }
  .calc-note { padding: 14px 22px; }
}

/* Sources des chiffres */
.section-sources { padding: 8px 0 56px; }
.sources { font-size: .875rem; color: var(--gris); }
.sources summary { display: inline-block; cursor: pointer; font-size: .8125rem; letter-spacing: .18em; text-transform: uppercase; color: var(--or-texte); }
.sources summary:hover { color: var(--vert); }
.sources ol { display: flex; flex-direction: column; gap: 8px; max-width: 920px; margin-top: 14px; padding-left: 20px; }

/* Les apparitions gardent leur propre fondu, même sur les blocs qui ont leurs transitions */
html .apparition { transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  .apparition { opacity: 1; transform: none; }
}

/* Coches lisibles sur fond vert */
.section-sombre .coches li::before { border-color: var(--or); }

/* ==========================================================
   v6 : formes arrondies, arches (la porte du dépliant), photos
   ========================================================== */
:root { --rayon: 22px; --sauge: #E4EBE5; --ombre-verte: 0 30px 60px -34px rgba(18,51,43,.55); }
.ico { display: block; width: 24px; height: 24px; }

/* Boutons en pilule */
.btn { border-radius: 999px; padding: 0 28px; }
.menu-bouton, .lien-evitement { border-radius: 999px; }
.btn-verre { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.42); color: var(--blanc); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.btn-verre:hover { background: rgba(255,255,255,.18); border-color: var(--or); color: var(--blanc); }

/* Arrondis partout, du plus doux au plus marqué */
.carte, .chiffre-carte, .compte-rendu, .encadre, .formulaire, .calculateur, .comparatif > div, .semaine li, .bilan-semaine, .carte-sap, .carte-zone-cadre, .chiffre-encart, .exemple { border-radius: var(--rayon); }
.bandeau { border-radius: 32px; }
.calculateur, .carte-zone-cadre, .chiffre-carte { overflow: hidden; }
.chiffre-encart { border-left: 1px solid var(--ligne); }
.champ input, .champ select, .champ textarea, .choix-formule label { border-radius: 12px; }
.pastilles li, .semaine .temps { border-radius: 999px; }
.photo-equipe { border-radius: 28px; }
.photo-equipe img { border-radius: 18px; }

/* Cadre en arche, comme la porte du dépliant */
.arche { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 999px 999px var(--rayon) var(--rayon); box-shadow: var(--ombre-verte); background: var(--creme-2); }
.arche picture, .arche img { display: block; width: 100%; height: 100%; object-fit: cover; }
.arche img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.arche:hover img { transform: scale(1.05); }
.arche::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.6); border-radius: 999px 999px 12px 12px; pointer-events: none; }
.arche-large { aspect-ratio: 6 / 5; border-radius: 50% 50% var(--rayon) var(--rayon) / 40% 40% var(--rayon) var(--rayon); }
.arche-large::after { border-radius: 50% 50% 12px 12px / 40% 40% 12px 12px; }
.arche-hero { max-width: 400px; margin-left: auto; }
.cadre-arrondi { overflow: hidden; border-radius: 32px; aspect-ratio: 4 / 5; box-shadow: var(--ombre-verte); }
.cadre-arrondi picture, .cadre-arrondi img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Signature de marque */
.signature { margin-bottom: 18px; font-family: var(--serif); font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); line-height: 1.2; color: var(--clair-2); }
.signature em { font-style: italic; color: var(--or); }
.signature-claire { color: var(--vert); }
.signature-claire em { color: var(--or-texte); }

/* Haut de page de l'accueil : photo de bureau en fond */
.hero-b2b { position: relative; overflow: hidden; display: flex; align-items: center; min-height: min(88vh, 820px); padding: 104px 0 150px; background: var(--vert); color: var(--clair); }
.hero-b2b-fond, .hero-b2b-fond img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-b2b-fond img { object-fit: cover; object-position: 65% center; animation: respirer 24s ease-in-out infinite alternate; }
.hero-b2b::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(12,36,30,.95) 0%, rgba(12,36,30,.86) 38%, rgba(12,36,30,.45) 70%, rgba(12,36,30,.22) 100%); }
.hero-b2b-grille { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 48px; align-items: center; }
.hero-b2b h1 { max-width: 15ch; color: var(--blanc); font-size: clamp(2.7rem, 1.5rem + 4vw, 4.7rem); line-height: 1.02; }
.hero-b2b .chapo { margin-top: 26px; max-width: 54ch; font-size: 1.1875rem; font-weight: 300; color: var(--clair-2); }
.hero-b2b .signature, .hero-b2b h1, .hero-b2b .chapo, .hero-b2b .actions { animation: monter .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-b2b h1 { animation-delay: .1s; }
.hero-b2b .chapo { animation-delay: .25s; }
.hero-b2b .actions { animation-delay: .4s; }

/* Notifications qui montrent le service en action */
.notifs { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.notif { display: flex; align-items: center; gap: 14px; width: min(100%, 330px); padding: 14px 16px; background: rgba(251,248,242,.97); color: var(--encre); border-radius: 20px; box-shadow: 0 24px 48px -20px rgba(0,0,0,.55); animation: notif-arrive .8s cubic-bezier(.2,.8,.2,1.15) both, flotter 6s ease-in-out infinite; }
.notif:nth-child(1) { animation-delay: .9s, 1.8s; }
.notif:nth-child(2) { animation-delay: 1.7s, 2.6s; margin-right: 46px; }
.notif:nth-child(3) { animation-delay: 2.5s, 3.4s; }
@keyframes notif-arrive { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes flotter { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.notif-icone { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--vert); color: var(--or); }
.notif-icone .ico { width: 22px; height: 22px; }
.notif-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.notif strong { font-weight: 500; color: var(--vert); }
.notif small { font-size: .84rem; color: var(--gris); }
.notif-heure { align-self: flex-start; font-size: .75rem; color: #707A73; font-variant-numeric: tabular-nums; }
@media (max-width: 960px) {
  .hero-b2b-grille { grid-template-columns: 1fr; }
  .notifs { align-items: flex-start; }
  .notif:nth-child(2) { margin-right: 0; margin-left: 28px; }
  .notif:nth-child(3) { display: none; }
}
@media (max-width: 760px) {
  .hero-b2b { min-height: 0; padding: 56px 0 128px; }
  .hero-b2b::after { background: linear-gradient(180deg, rgba(12,36,30,.9) 0%, rgba(12,36,30,.8) 100%); }
  .hero-b2b .chapo { font-size: 1.0625rem; }
  .notif:nth-child(2) { margin-left: 16px; }
}

/* Bandeau de confiance, posé à cheval sur la photo */
.confiance-zone { position: relative; z-index: 2; margin-top: -64px; }
.confiance { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 20px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 28px; box-shadow: 0 30px 60px -30px rgba(18,51,43,.45); }
.confiance li { display: flex; align-items: center; gap: 14px; padding: 8px 10px; }
.confiance .ico { flex-shrink: 0; width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--sauge); color: var(--vert); }
.confiance span { font-size: .9rem; line-height: 1.35; color: var(--gris); }
.confiance strong { display: block; font-size: 1rem; font-weight: 500; color: var(--vert); }
.confiance-zone + .section { padding-top: 80px; }
@media (max-width: 960px) { .confiance { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .confiance { grid-template-columns: 1fr; padding: 12px; } .confiance-zone { margin-top: -84px; } }

/* Trois temps */
.trois-temps { position: relative; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 52px; }
.trois-temps::before { content: ""; position: absolute; top: 44px; left: 17%; right: 17%; border-top: 2px dashed var(--ligne-2); }
.trois-temps li { position: relative; padding: 0 12px; text-align: center; }
.temps-icone { position: relative; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 auto 22px; border-radius: 50%; background: var(--sauge); color: var(--vert); transition: background-color .35s, color .35s, transform .45s cubic-bezier(.2,.7,.2,1.4); }
.temps-icone .ico { width: 36px; height: 36px; }
.temps-num { position: absolute; top: -2px; right: -2px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--or); color: var(--vert); font-size: .9rem; font-weight: 500; }
.trois-temps li:hover .temps-icone { background: var(--vert); color: var(--or); transform: translateY(-6px) rotate(-5deg); }
.trois-temps h3 { margin-bottom: 8px; font-size: 1.65rem; }
.trois-temps p { max-width: 30ch; margin: 0 auto; color: var(--gris); }
@media (max-width: 760px) { .trois-temps { grid-template-columns: 1fr; gap: 36px; } .trois-temps::before { display: none; } }

/* Services en mosaïque */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 16px; margin-top: 44px;
  grid-template-areas: "lavage lavage pressing panier" "lavage lavage sport panier" "colis rdv plus plus"; }
.tuile { position: relative; overflow: hidden; margin: 0; display: flex; flex-direction: column; gap: 6px; padding: 24px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 26px; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.tuile:hover { transform: translateY(-6px); box-shadow: var(--ombre-verte); }
.tuile > .ico { width: 52px; height: 52px; margin-bottom: auto; padding: 13px; border-radius: 50%; background: var(--sauge); color: var(--vert); transition: transform .5s cubic-bezier(.2,.7,.2,1.5); }
.tuile:hover > .ico { transform: rotate(-10deg) scale(1.08); }
.tuile h3 { margin-top: 18px; font-size: 1.45rem; line-height: 1.15; }
.tuile p { font-size: .95rem; color: var(--gris); }
.tuile-photo { justify-content: flex-end; padding: 0; border: 0; background: var(--vert); }
.tuile-photo picture, .tuile-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile-photo img { transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.tuile-photo:hover img { transform: scale(1.06); }
.tuile-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,36,30,0) 38%, rgba(12,36,30,.88) 100%); }
.tuile-photo figcaption { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; padding: 26px; }
.tuile-photo strong { font-family: var(--serif); font-size: 1.7rem; font-weight: 400; line-height: 1.1; color: var(--blanc); }
.tuile-photo span { font-size: .95rem; color: var(--clair-2); }
.tuile-lavage { grid-area: lavage; }
.tuile-lavage strong { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); }
.tuile-pressing { grid-area: pressing; }
.tuile-sport { grid-area: sport; }
.tuile-panier { grid-area: panier; }
.tuile-colis { grid-area: colis; }
.tuile-rdv { grid-area: rdv; }
.tuile-plus { grid-area: plus; }
.tuile-sombre { background: var(--vert); border-color: var(--vert); }
.tuile-sombre h3 { color: var(--clair); }
.tuile-sombre p { color: var(--clair-2); }
.tuile-sombre > .ico { background: rgba(201,164,92,.2); color: var(--or); }
.tuile-or { background: var(--or); border-color: var(--or); }
.tuile-or p { color: var(--vert-2); }
.tuile-or > .ico { background: rgba(18,51,43,.12); }
@media (max-width: 900px) {
  .bento { grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(190px, auto);
    grid-template-areas: "lavage lavage" "lavage lavage" "pressing sport" "panier panier" "colis rdv" "plus plus"; }
  .tuile { padding: 20px; }
  .tuile h3 { font-size: 1.25rem; }
}

/* Chiffres sur trois colonnes */
.chiffres-trois { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.section-sombre .actions { margin-top: 40px; }

/* Photo et texte côte à côte */
.duo-grille { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 64px; align-items: center; }
.duo-inverse { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.duo-grille > .arche { max-width: 420px; justify-self: center; }
.duo-grille > .arche-large { max-width: 520px; }
.puces-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.puces-chips li { padding: 8px 16px; border-radius: 999px; background: var(--sauge); color: var(--vert); font-size: .92rem; }
@media (max-width: 860px) { .duo-grille, .duo-inverse { grid-template-columns: 1fr; gap: 40px; } .duo-grille > .arche { max-width: 340px; } }

/* Haut de page de la page Entreprises : texte et photo en arche */
.hero-split { padding: 80px 0 104px; }
.hero-split-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 64px; align-items: center; }
.hero-split h1 { max-width: 16ch; }
.hero-split-visuel { position: relative; width: 100%; max-width: 420px; justify-self: end; }
.notifs-flottantes { position: absolute; left: -96px; bottom: 36px; width: 320px; align-items: flex-start; }
.notifs-flottantes .notif:nth-child(2) { margin-right: 0; margin-left: 44px; }
@media (max-width: 960px) {
  .hero-split-grille { grid-template-columns: 1fr; }
  .hero-split-visuel { justify-self: center; max-width: 360px; }
  .notifs-flottantes { left: -24px; bottom: 24px; width: 300px; }
}
@media (max-width: 520px) {
  .hero-split-visuel { max-width: 300px; }
  .notifs-flottantes { position: relative; left: 0; bottom: 0; width: 100%; margin-top: -56px; }
}

/* Avantages avec icônes */
.avantages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 48px; margin-top: 52px; }
.avantage > .ico { width: 56px; height: 56px; margin-bottom: 18px; padding: 14px; border-radius: 18px; background: var(--sauge); color: var(--vert); transition: transform .45s cubic-bezier(.2,.7,.2,1.5), background-color .3s, color .3s; }
.avantage:hover > .ico { transform: translateY(-4px) rotate(-6deg); background: var(--vert); color: var(--or); }
.avantage h3 { margin-bottom: 8px; font-size: 1.5rem; }
.avantage p { color: var(--gris); }
@media (max-width: 900px) { .avantages { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .avantages { grid-template-columns: 1fr; gap: 32px; } }

/* Liste des services avec photo */
.services-grille { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
.liste-services { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
.liste-services li { display: flex; align-items: center; gap: 12px; padding: 12px 18px; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 999px; transition: border-color .25s, transform .25s; }
.liste-services li:hover { border-color: var(--or); transform: translateX(4px); }
.liste-services .ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--or-texte); }
@media (max-width: 900px) { .services-grille { grid-template-columns: 1fr; gap: 40px; } .cadre-arrondi { aspect-ratio: 16 / 10; } }
@media (max-width: 520px) { .liste-services { grid-template-columns: 1fr; } }

/* Titres sans majuscules forcées dans les nouvelles sections */
.titre-section + .intro { margin-top: 16px; }

@media (prefers-reduced-motion: reduce) {
  .notif, .hero-b2b-fond img { animation: none !important; }
}

/* Ajustements après relecture */
.bento .tuile-photo { padding: 0; }
.tuile-photo::after { background: linear-gradient(180deg, rgba(12,36,30,0) 22%, rgba(12,36,30,.55) 58%, rgba(12,36,30,.93) 100%); }
.tuile-photo figcaption { text-shadow: 0 1px 12px rgba(0,0,0,.35); }
@media (max-width: 900px) { .tuile-panier { min-height: 280px; } .tuile-photo figcaption { padding: 22px; } }
@media (max-width: 520px) {
  .notifs-flottantes .notif:nth-child(2) { margin-left: 20px; width: calc(100% - 20px); }
}

/* ==========================================================
   v7 : mosaïque en photos, catalogue par univers, services signature
   ========================================================== */
/* Petites tuiles photo de la mosaïque */
.tuile-photo:not(.tuile-lavage) strong { font-size: 1.35rem; }
.tuile-photo:not(.tuile-lavage) figcaption { padding: 20px 22px; }
.tuile-photo:not(.tuile-lavage) span { font-size: .88rem; }
a.tuile { text-decoration: none; color: var(--vert); }
a.tuile:hover { color: var(--vert); }
.tuile-plus h3 { color: var(--vert); }

/* Catalogue par univers (onglets) */
.univers { margin-top: 40px; }
.univers-onglets { display: flex; flex-wrap: wrap; gap: 10px; }
.onglet { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 14px; border: 1px solid var(--ligne-2); border-radius: 999px; background: var(--blanc); color: var(--vert); font: inherit; font-size: .98rem; cursor: pointer; transition: background-color .25s, color .25s, border-color .25s, transform .25s, box-shadow .25s; }
.onglet .ico { width: 22px; height: 22px; color: var(--or-texte); transition: color .25s, transform .35s cubic-bezier(.2,.7,.2,1.5); }
.onglet:hover { border-color: var(--or); transform: translateY(-2px); }
.onglet:hover .ico { transform: rotate(-8deg) scale(1.1); }
.onglet[aria-selected="true"] { background: var(--vert); border-color: var(--vert); color: var(--clair); box-shadow: 0 14px 28px -16px rgba(18,51,43,.7); }
.onglet[aria-selected="true"] .ico { color: var(--or); }
.univers-panneau { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 0; margin-top: 24px; overflow: hidden; background: var(--blanc); border: 1px solid var(--ligne); border-radius: 30px; box-shadow: var(--ombre-verte); }
.univers-panneau + .univers-panneau { margin-top: 24px; }
.js .univers-panneau + .univers-panneau { margin-top: 24px; }
.univers-panneau.entre { animation: panneau-entre .45s cubic-bezier(.2,.7,.2,1) both; }
@keyframes panneau-entre { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.univers-photo { position: relative; min-height: 340px; }
.univers-photo picture, .univers-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.univers-texte { padding: 36px 40px; }
.univers-texte h3 { margin-bottom: 18px; font-size: 1.9rem; }
.univers-liste { list-style: none; display: grid; gap: 4px; }
.univers-liste li { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--ligne); }
.univers-liste li:last-child { border-bottom: 0; }
.univers-liste .ico { flex-shrink: 0; width: 20px; height: 20px; margin-top: 3px; color: var(--or-texte); }
@media (max-width: 860px) {
  .univers-onglets { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px; padding: 4px 24px 10px; scrollbar-width: none; }
  .univers-onglets::-webkit-scrollbar { display: none; }
  .onglet { flex-shrink: 0; }
  .univers-panneau { grid-template-columns: 1fr; }
  .univers-photo { min-height: 200px; aspect-ratio: 16 / 9; }
  .univers-texte { padding: 26px 24px; }
}

/* Services signature */
.section-signatures .signature { display: inline-flex; align-items: center; gap: 10px; }
.section-signatures .signature .ico { width: 24px; height: 24px; color: var(--or); }
.signatures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 44px; }
.signature-carte { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 30px 26px; border-radius: 26px; background: rgba(255,255,255,.05); border: 1px solid var(--vert-ligne); transition: transform .45s cubic-bezier(.2,.7,.2,1), border-color .35s, background-color .35s; }
.signature-carte:hover { transform: translateY(-6px); border-color: var(--or); background: rgba(255,255,255,.08); }
.signature-carte > .ico { width: 54px; height: 54px; margin-bottom: 10px; padding: 13px; border-radius: 50%; background: var(--or); color: var(--vert); transition: transform .5s cubic-bezier(.2,.7,.2,1.5); }
.signature-carte:hover > .ico { transform: rotate(-10deg) scale(1.06); }
.signature-carte h3 { color: var(--clair); font-size: 1.45rem; line-height: 1.15; }
.signature-carte p { color: var(--clair-2); font-weight: 300; }
@media (max-width: 1020px) { .signatures { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .signatures { grid-template-columns: 1fr; } }
@media (min-width: 861px) { .onglet { gap: 8px; padding: 0 16px 0 12px; font-size: .95rem; } }
@media (max-width: 520px) {
  .tuile-photo:not(.tuile-lavage):not(.tuile-panier) span { display: none; }
  .tuile-photo:not(.tuile-lavage) strong { font-size: 1.2rem; }
  .tuile-photo:not(.tuile-lavage) figcaption { padding: 16px; }
}