/* Site Olior Conseil – charte : marine, or, turquoise ; titres en serif (Palatino), texte en sans-serif.
   Aucune police téléchargée : polices du système uniquement (pas de service tiers). */
:root {
  --marine: #152743; --marine-2: #22385C; --or: #A08E67; --or-texte: #7A6A47; --turquoise: #00948F; --turquoise-fonce: #007A76; --lien: #007A76;
  --ombre-media: rgba(21, 39, 67, .15);
  --fond: #FFFFFF; --fond-doux: #F6F7F9; --texte: #1C2433; --doux: #5B6472; --trait: #E2E6EC;
  --titre: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --corps: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --largeur: 1140px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --fond: #0F1726; --fond-doux: #152033; --texte: #E6EAF1; --doux: #A3AEC0; --trait: #26344C; --or: #C2AE84; --or-texte: #C2AE84; --turquoise: #2BB5AF; --turquoise-fonce: #007A76; --lien: #2BB5AF; color-scheme: dark; } }
:root[data-theme="dark"] {
  --fond: #0F1726; --fond-doux: #152033; --texte: #E6EAF1; --doux: #A3AEC0; --trait: #26344C; --or: #C2AE84; --or-texte: #C2AE84; --turquoise: #2BB5AF; --turquoise-fonce: #007A76; --lien: #2BB5AF; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--fond); color: var(--texte); font: 17px/1.6 var(--corps); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; height: auto; display: block; }
a { color: var(--lien); }
h1, h2, h3 { font-family: var(--titre); line-height: 1.15; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(34px, 5vw, 56px); letter-spacing: -.01em; }
h2 { font-size: clamp(28px, 3.6vw, 40px); }
h3 { font-size: 21px; }
p { margin: 0; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
section:not(.fiche) { padding-block: 88px; }
.chapeau { color: var(--doux); font-size: 19px; max-width: 62ch; margin-top: 16px; }
.fond-doux { background: var(--fond-doux); }

/* ---------- en-tête ---------- */
header.site { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--fond) 92%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--trait); }
header.site .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 72px; }
.marque img { height: 40px; width: auto; }
:root[data-theme="dark"] .marque .clair, .marque .sombre { display: none; }
:root[data-theme="dark"] .marque .sombre { display: block; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .marque .clair { display: none; } :root:not([data-theme="light"]) .marque .sombre { display: block; } }
nav.principale { display: flex; gap: 26px; align-items: center; }
nav.principale a { color: var(--texte); text-decoration: none; font-size: 15px; font-weight: 500; }
nav.principale a:hover { color: var(--turquoise); }
.bouton { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 10px; font: 600 16px var(--corps);
  text-decoration: none; background: var(--turquoise-fonce); color: #fff; border: 1px solid transparent; transition: background .15s; }
.bouton:hover { background: var(--marine-2); }
.bouton.second { background: transparent; color: var(--texte); border-color: var(--trait); }
.bouton.second:hover { border-color: var(--texte); background: transparent; }
.entete-rdv { padding: 9px 16px; font-size: 15px; gap: 0; }
nav.principale { margin-left: auto; }
a:focus-visible, .bouton:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
/* Lien d'évitement : invisible jusqu'au premier appui sur Tab */
.evitement { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 8px; background: var(--marine); color: #fff; font-weight: 600; }
.evitement:focus { top: 12px; }

/* ---------- accroche ---------- */
.accroche { padding-block: 72px 88px; }
.accroche .conteneur { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.accroche .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.accroche .preuve { margin-top: 22px; font-size: 14px; color: var(--doux); }
.video { border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(21, 39, 67, .22); background: var(--marine); aspect-ratio: 16 / 9; }
.video video { width: 100%; height: 100%; object-fit: contain; }
video:fullscreen { object-fit: contain; background: #000; }

/* ---------- modules ---------- */
.modules { display: grid; gap: 72px; margin-top: 56px; }
.module { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; }
.module:nth-child(even) .module-texte { order: 2; }
.module-texte { display: grid; gap: 14px; }
.question { font: 700 23px/1.3 var(--titre); color: var(--texte); padding-left: 16px; border-left: 2px solid var(--or); text-wrap: balance; }
.module-texte h3 { font: 600 15px var(--corps); letter-spacing: .02em; color: var(--turquoise-fonce); }
:root[data-theme="dark"] .module-texte h3 { color: var(--turquoise); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .module-texte h3 { color: var(--turquoise); } }
.module-texte ul { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; color: var(--doux); }
.module-texte li { padding-left: 26px; position: relative; }
.module-texte li::before { content: ""; position: absolute; left: 0; top: .55em; width: 14px; height: 2px; background: var(--or); }
.capture { border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); box-shadow: 0 16px 40px rgba(21, 39, 67, .12); }

/* ---------- démo ---------- */
.bandeau-demo { background: var(--marine); color: #fff; border-radius: 20px; padding: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.bandeau-demo h2 { color: #fff; }
.bandeau-demo p { color: #C9D1DE; }
.bandeau-demo .bouton { margin-top: 26px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duo img { border-radius: 10px; }
.duo figcaption { font-size: 13px; color: #C9D1DE; margin-top: 8px; }

/* ---------- méthode ---------- */
.etapes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 44px; counter-reset: etape; }
.etape { counter-increment: etape; display: grid; gap: 10px; align-content: start; }
.etape::before { content: counter(etape); display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  background: var(--marine); color: #fff; font: 700 18px var(--titre); }
:root[data-theme="dark"] .etape::before { background: var(--or); color: var(--marine); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .etape::before { background: var(--or); color: var(--marine); } }
.etape p { color: var(--doux); font-size: 15.5px; }

.engagements { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 56px; }
.engagement { border-top: 2px solid var(--or); padding-top: 16px; display: grid; gap: 6px; }
.engagement p { color: var(--doux); font-size: 15px; }

/* ---------- tarifs ---------- */
.tarifs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; align-items: stretch; }
.tarif { border: 1px solid var(--trait); border-radius: 16px; padding: 28px; display: grid; gap: 14px; align-content: start; background: var(--fond); }
.tarif.mis-en-avant { border-color: var(--turquoise); box-shadow: 0 0 0 1px var(--turquoise); }
.prix { font: 700 34px var(--titre); }
.aide { margin: 0; font-size: 14px; color: var(--doux); }
.etape-prix { margin: 6px 0 -6px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--turquoise); }
.prix small { font: 400 15px var(--corps); color: var(--doux); }
.tarif ul { margin: 0; padding-left: 18px; color: var(--doux); font-size: 15px; display: grid; gap: 6px; }
.mention { margin-top: 22px; font-size: 14px; color: var(--doux); }
table.paliers { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
table.paliers td { padding: 6px 0; border-bottom: 1px solid var(--trait); }
table.paliers td:last-child { text-align: right; font-weight: 600; }

/* ---------- à propos & contact ---------- */
.apropos { display: grid; grid-template-columns: 280px 1fr; gap: 56px; align-items: center; }
.photo { aspect-ratio: 4 / 5; width: 100%; object-fit: cover; border-radius: 16px; box-shadow: 0 16px 40px rgba(21, 39, 67, .15); }
.apropos .texte { display: grid; gap: 16px; }
.apropos .texte p { color: var(--doux); }
.contact { text-align: center; display: grid; gap: 18px; justify-items: center; }
.contact .actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.coordonnees { color: var(--doux); font-size: 16px; display: grid; gap: 4px; }
.a-completer { background: #FFF3C4; color: #5A4500; padding: 0 4px; border-radius: 3px; }

footer.site { background: var(--marine); color: #C9D1DE; padding-block: 48px; font-size: 14px; }
footer.site .conteneur { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: center; }
footer.site img { height: 34px; width: auto; }
footer.site a { color: #fff; text-decoration: underline; text-underline-offset: 3px; margin-left: 20px; }

/* ---------- pages légales ---------- */
.legal { max-width: 760px; padding-block: 64px; }
.legal h1 { font-size: 40px; margin-bottom: 28px; }
.legal h2 { font-size: 24px; margin: 36px 0 10px; }
.legal p, .legal li { color: var(--doux); }
.legal p + p { margin-top: 10px; }

/* ---------- téléphone et tablette ---------- */
@media (max-width: 980px) {
  header.site .conteneur { flex-wrap: wrap; row-gap: 0; }
  .entete-rdv { margin-left: auto; }
  nav.principale { order: 3; width: calc(100% + 40px); margin: 0 -20px; padding: 0 20px; gap: 22px; overflow-x: auto; scrollbar-width: none; border-top: 1px solid var(--trait); }
  nav.principale::-webkit-scrollbar { display: none; }
  nav.principale a { flex: none; padding-block: 12px; font-size: 14px; }
  .accroche .conteneur, .module, .bandeau-demo, .apropos { grid-template-columns: 1fr; }
  .module:nth-child(even) .module-texte { order: 0; }
  .tarifs { grid-template-columns: 1fr 1fr; }
  .etapes, .engagements { grid-template-columns: 1fr 1fr; }
  .bandeau-demo { padding: 36px 26px; }
  .apropos .photo { max-width: 260px; }
}
@media (max-width: 620px) {
  section:not(.fiche) { padding-block: 60px; }
  .tarifs, .etapes, .engagements, .duo { grid-template-columns: 1fr; }
  .marque img { height: 32px; }
  .entete-rdv { padding: 8px 12px; font-size: 14px; }
  .entete-rdv .large { display: none; }
  footer.site a { margin: 0 16px 0 0; }
}

/* Mode sombre : pas d'ombre teintée sur fond sombre. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.video, .capture, .photo) { box-shadow: none; } }
:root[data-theme="dark"] :is(.video, .capture, .photo) { box-shadow: none; }

/* ---------- ajouts : légende vidéo, outils compacts, exemple de prix, appel mobile ---------- */
.legende-video { margin-top: 12px; font-size: 14px; color: var(--doux); }
.modules-compacts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 72px; }
.module-compact { border-top: 2px solid var(--or); padding-top: 18px; display: grid; gap: 10px; align-content: start; }
.module-compact .question { font-size: 19px; padding-left: 0; border-left: 0; }
.module-compact h3 { font: 600 15px var(--corps); letter-spacing: .02em; color: var(--turquoise-fonce); }
.module-compact p:last-child { color: var(--doux); font-size: 15px; }
.exemple { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--fond-doux); font-size: 14.5px; color: var(--texte); }
.entete-tel { display: none; place-items: center; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--trait); color: var(--texte); }
.entete-tel:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
nav.principale a.bouton { color: #fff; }
@media (max-width: 980px) { .modules-compacts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .modules-compacts { grid-template-columns: 1fr; margin-top: 48px; } .entete-tel { display: grid; margin-left: auto; } .entete-tel + .entete-rdv { margin-left: 0; } header.site .conteneur { column-gap: 8px; } }
:root[data-theme="dark"] .module-compact h3 { color: var(--turquoise); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .module-compact h3 { color: var(--turquoise); } }

/* ---------- repère fondateur, pictogrammes, détails des tarifs, finitions mobile ---------- */
.fondateur { margin-top: 10px; font-size: 14px; color: var(--doux); padding-left: 12px; border-left: 2px solid var(--or); max-width: 56ch; }
.pictogramme { width: 28px; height: 28px; fill: none; stroke: var(--turquoise-fonce); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .pictogramme { stroke: var(--turquoise); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pictogramme { stroke: var(--turquoise); } }
.details-tarif { border-top: 1px solid var(--trait); padding-top: 12px; font-size: 15px; color: var(--doux); }
.details-tarif summary { cursor: pointer; font-weight: 600; color: var(--texte); }
.details-tarif summary:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.details-tarif[open] summary { margin-bottom: 10px; }
.details-tarif p { margin-bottom: 10px; }
.bouton.second { border-color: var(--doux); }
@media (max-width: 620px) {
  .entete-rdv { min-height: 44px; }
}
/* ---------- refonte : trois temps, bandeau « ce que nous ne vendons pas », catalogue, simulateur, questions ---------- */
.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trois-temps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; counter-reset: temps; }
.trois-temps li { counter-increment: temps; font-size: 15px; color: var(--doux); padding-top: 12px; border-top: 2px solid var(--or); }
.trois-temps li::before { content: counter(temps) ". "; font-weight: 700; color: var(--or-texte); }
.trois-temps b { color: var(--texte); }
.bandeau-non { padding-block: 32px; background: var(--marine); color: #C9D1DE; }
.bandeau-non .conteneur { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; }
.pastilles { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pastilles li { padding: 8px 16px; border: 1px solid #C2AE84; border-radius: 999px; color: #fff; font-weight: 600; font-size: 15px; }
.bandeau-non p { flex: 1 1 320px; font-size: 16px; }
.catalogue { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.fiche { border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; background: var(--fond); }
.fiche img { aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--trait); }
.fiche .question { font-size: 19px; margin: 20px 20px 0; padding-left: 12px; }
.fiche h3 { font: 600 15px var(--corps); letter-spacing: .02em; color: var(--turquoise-fonce); margin: 12px 20px 0; }
.fiche > p:not(.question):not(.fiche-pied) { margin: 8px 20px 0; color: var(--doux); font-size: 15px; }
.fiche-pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 20px 20px; padding-top: 14px; border-top: 1px solid var(--trait); font-size: 14px; color: var(--doux); }
.fiche-pied a { font-weight: 600; text-decoration: none; }
.fiche-pied { flex-wrap: wrap; }
.fiche-pied a.vers-questionnaire { color: var(--or-texte); }
.simulateur { display: grid; grid-template-columns: 1fr 1fr; margin-top: 40px; border: 1px solid var(--turquoise); border-radius: 16px; overflow: hidden; background: var(--fond); }
.sim-choix { padding: 28px; display: grid; gap: 18px; align-content: start; }
.sim-choix label { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.sim-choix select { font: 16px var(--corps); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--doux); background: var(--fond); color: var(--texte); }
.sim-choix .case { display: flex; gap: 10px; align-items: center; font-weight: 500; }
.sim-choix .case input { width: 20px; height: 20px; accent-color: var(--turquoise-fonce); }
.sim-choix :focus-visible { outline: 2px solid var(--or); outline-offset: 2px; }
.sim-resultat { padding: 28px; background: var(--fond-doux); display: grid; gap: 14px; align-content: center; border-left: 1px solid var(--trait); }
.sim-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; color: var(--doux); }
.sim-ligne b { font: 700 22px var(--titre); color: var(--texte); font-variant-numeric: tabular-nums; }
.sim-ligne.grand b { font-size: 32px; color: var(--turquoise-fonce); }
:root[data-theme="dark"] .sim-ligne.grand b { color: var(--turquoise); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sim-ligne.grand b { color: var(--turquoise); } }
.sim-detail { font-size: 14.5px; color: var(--texte); }
.sim-note { font-size: 13.5px; color: var(--doux); }
.grille-tarifs { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; margin-top: 40px; align-items: start; }
.grille-tarifs h3 { margin-bottom: 12px; }
table.paliers th { text-align: right; font-size: 13px; font-weight: 600; color: var(--doux); padding: 6px 0; border-bottom: 1px solid var(--trait); }
table.paliers th:first-child, table.paliers td:first-child { text-align: left; font-weight: 400; }
table.paliers td { text-align: right; font-weight: 600; }
.liste-tarifs { margin: 0; padding-left: 18px; display: grid; gap: 10px; color: var(--doux); font-size: 15.5px; }
.liste-tarifs b { color: var(--texte); }
.engagements-courts { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 40px; color: var(--doux); font-size: 15.5px; }
.engagements-courts li { padding-left: 16px; border-left: 2px solid var(--or); }
.engagements-courts b { color: var(--texte); }
.conseil { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.conseil .tarif > p:last-child { color: var(--doux); font-size: 15.5px; }
.questions { max-width: 820px; }
.questions h2 { margin-bottom: 24px; }
.questions details { border-bottom: 1px solid var(--trait); padding-block: 16px; }
.questions summary { cursor: pointer; font-weight: 600; font-size: 18px; }
.questions summary:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.questions details p { margin-top: 10px; color: var(--doux); }
@media (max-width: 980px) {
  .catalogue { grid-template-columns: 1fr 1fr; }
  .simulateur, .grille-tarifs { grid-template-columns: 1fr; }
  .sim-resultat { border-left: 0; border-top: 1px solid var(--trait); }
}
@media (max-width: 620px) {
  .catalogue, .conseil, .engagements-courts, .trois-temps { grid-template-columns: 1fr; }
  .trois-temps { gap: 8px; }
  .sim-choix, .sim-resultat { padding: 20px; }
  table.paliers { font-size: 14px; }
}
:root[data-theme="dark"] .fiche h3 { color: var(--turquoise); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fiche h3 { color: var(--turquoise); } }
.fiche-sur-mesure { border-style: dashed; border-color: var(--or); grid-template-rows: auto auto auto 1fr auto; }
.fiche-sur-mesure .question { margin-top: 24px; }
.atouts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 40px; }
.atouts > div { border-top: 2px solid var(--or); padding-top: 16px; display: grid; gap: 8px; align-content: start; }
.atouts h3 { font-size: 19px; }
.atouts p { color: var(--doux); font-size: 15.5px; }
.etiquette { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--trait); font: 600 11px var(--corps); letter-spacing: .04em; text-transform: uppercase; color: var(--doux); }
.detail-prix { margin-top: 36px; border-top: 1px solid var(--trait); padding-top: 16px; }
.detail-prix summary { cursor: pointer; font-weight: 600; color: var(--turquoise-fonce); }
:root[data-theme="dark"] .detail-prix summary { color: var(--turquoise); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .detail-prix summary { color: var(--turquoise); } }
.detail-prix summary:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
.detail-prix .grille-tarifs { margin-top: 24px; }
@media (max-width: 980px) { .atouts { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .atouts { grid-template-columns: 1fr; } }

/* ---------- refonte 2026-10 : page plus vivante (maquette projet/maquette/accueil.html) ---------- */
/* Encart « conçu par quelqu'un qui a fait le métier » */
.ia-discret { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; margin-top: 56px; padding-top: 40px; border-top: 1px solid var(--trait); }
.ia-discret h3 { font-size: 22px; margin: 6px 0 12px; }
.ia-discret > div > p { color: var(--doux); }
.ia-discret ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; color: var(--doux); font-size: 15.5px; }
.ia-discret li { padding-left: 16px; border-left: 2px solid var(--or); }
.ia-discret li b { color: var(--texte); }
@media (max-width: 760px) { .ia-discret { grid-template-columns: 1fr; gap: 20px; } }

/* Boutons du haut de page et du contact (fonds sombres) */
.bouton.or { background: #7A6A47; color: #fff; border-radius: 999px; padding: 15px 26px; transition: transform .2s, box-shadow .2s, background .2s; }
.bouton.or:hover { background: #6A5C3D; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .25); }
.bouton.ligne { background: transparent; color: #fff; border: 1.5px solid #C9D1DE; border-radius: 999px; padding: 15px 26px; }
.bouton.ligne:hover { background: rgba(255, 255, 255, .08); border-color: #fff; }
.bouton .fleche { transition: transform .2s; }
.bouton:hover .fleche { transform: translateX(4px); }

/* Haut de page sombre */
.accroche { position: relative; overflow: hidden; padding-block: 96px 0; color: #fff;
  background: linear-gradient(160deg, #1A2E4F 0%, #0F1C33 100%); }
.accroche::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px; -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }
.accroche .conteneur { position: relative; z-index: 1; }
.accroche h1 { font-size: clamp(40px, 6vw, 70px); line-height: 1.08; }
.accroche h1 em { font-style: normal; color: #C2AE84; position: relative; white-space: nowrap; }
.accroche h1 em::after { content: ""; position: absolute; left: 0; right: 0; bottom: .02em; height: .08em; background: #A08E67; transform-origin: left; animation: souligne 1s .8s ease-out both; }
@keyframes souligne { from { transform: scaleX(0); } }
.accroche .chapeau { color: #C9D1DE; font-size: 20px; max-width: 32em; margin-top: 24px; }
.accroche .actions { margin-top: 34px; }
.accroche .preuve { display: flex; align-items: center; gap: 14px; margin-top: 34px; font-size: 14.5px; color: #C9D1DE; max-width: 34em; }
.accroche .preuve img { flex: none; width: 48px; height: 48px; border-radius: 50%; object-fit: cover; border: 2px solid #A08E67; }
.scene { position: relative; }
.accroche .video { box-shadow: 0 30px 80px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12); transform: perspective(1400px) rotateY(-7deg) rotateX(3deg); transition: transform .6s; }
.accroche .video:hover, .accroche .video:focus-within { transform: none; }
.alerte-flottante { position: absolute; display: flex; gap: 10px; align-items: center; background: #fff; color: #1C2433; border-radius: 12px; padding: 11px 16px;
  font-size: 14px; box-shadow: 0 14px 34px rgba(0, 0, 0, .3); animation: flotte 5s ease-in-out infinite; pointer-events: none; }
.alerte-flottante b { color: #152743; }
.alerte-flottante .point { width: 10px; height: 10px; border-radius: 50%; background: #00948F; }
.alerte-flottante.a1 { left: -26px; bottom: -38px; } /* sous la vidéo : ne cache ni le bouton ni les commandes */
/* Gros bouton de lecture : la barre de commandes du navigateur est petite et passe sous les alertes */
.accroche .video { position: relative; }
.lecture { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 24px 14px 16px; border: 0; border-radius: 999px; background: #152743; color: #fff; font: 600 16px var(--corps);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35); cursor: pointer; transition: transform .2s, background .2s; white-space: nowrap; }
@media (max-width: 1100px) { .lecture { padding: 10px 18px 10px 10px; font-size: 14.5px; gap: 10px; } .lecture-icone { width: 32px; height: 32px; } .lecture-icone::after { left: 12px; top: 8px; } }
.lecture:hover { background: #22385C; transform: translate(-50%, -50%) scale(1.04); }
.lecture:focus-visible { outline: 3px solid #C2AE84; outline-offset: 3px; }
.lecture[hidden] { display: none; }
.lecture small { font-weight: 400; color: #C9D1DE; }
.lecture-icone { width: 38px; height: 38px; border-radius: 50%; background: #7A6A47; position: relative; }
.lecture-icone::after { content: ""; position: absolute; left: 15px; top: 11px; border-style: solid; border-width: 8px 0 8px 13px; border-color: transparent transparent transparent #fff; }
.alerte-flottante.a2 { right: -12px; top: -18px; animation-delay: -2.5s; }
@keyframes flotte { 50% { transform: translateY(-10px); } }
.ruban { position: relative; z-index: 1; margin-top: 88px; padding-block: 22px; border-top: 1px solid rgba(255, 255, 255, .1); overflow: hidden; }
.ruban-piste { display: flex; gap: 48px; width: max-content; animation: defile 45s linear infinite; font: 21px var(--titre); color: #C9D1DE; white-space: nowrap; }
.ruban-piste span::before { content: "« "; color: #C2AE84; }
.ruban-piste span::after { content: " »"; color: #C2AE84; }
@keyframes defile { to { transform: translateX(-50%); } }

/* Problèmes du dirigeant */
.problemes h2 { max-width: 20em; font-size: clamp(30px, 4.2vw, 48px); }
.douleurs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 48px; }
.douleur { padding: 32px; border-radius: 16px; background: var(--fond-doux); border: 1px solid var(--trait); display: grid; gap: 10px; align-content: start; }
.douleur .chiffre { font: 700 56px/1 var(--titre); color: var(--or); }
.douleur p:last-child { color: var(--doux); font-size: 16px; }

/* Outils en onglets, sur fond crème */
.fond-creme { background: #F4EFE6; }
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 36px; }
.onglets button { font: 600 15px var(--corps); color: var(--texte); background: var(--fond); border: 1px solid #CFC3AE; border-radius: 999px; padding: 10px 18px; cursor: pointer; transition: background .2s, color .2s; }
.onglets button:hover { border-color: var(--marine); }
.onglets button[aria-selected="true"] { background: var(--marine); color: #fff; border-color: var(--marine); }
.onglets button:focus-visible { outline: 2px solid var(--or-texte); outline-offset: 3px; }
.catalogue.en-onglets { grid-template-columns: 1fr; margin-top: 20px; }
.catalogue.en-onglets .fiche[hidden] { display: none; }
@media (max-width: 620px) {
  .onglets { flex-wrap: nowrap; overflow-x: auto; margin-inline: -20px; padding: 2px 20px 6px; scrollbar-width: none; }
  .onglets::-webkit-scrollbar { display: none; }
  .onglets button { flex: none; }
}
.catalogue.en-onglets .fiche.active { grid-template-columns: 1fr 1.35fr; grid-template-rows: auto auto 1fr auto; align-items: start; padding: 36px; gap: 0 44px; border-radius: 20px; animation: entre .45s ease-out; }
.fiche .demo-outil { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--trait); background: var(--fond-doux); }
.catalogue.en-onglets .fiche.active :is(img, .demo-outil) { grid-column: 2; grid-row: 1 / 5; border: 1px solid var(--trait); border-radius: 12px; box-shadow: 0 18px 40px rgba(21, 39, 67, .12); }
.catalogue.en-onglets .fiche.active > :not(img, .demo-outil) { grid-column: 1; margin-left: 0; margin-right: 0; }
.catalogue.en-onglets .fiche.active .question { font-size: 28px; margin-top: 0; }
@keyframes entre { from { opacity: 0; transform: translateY(12px); } }
.catalogue.en-onglets .fiche-sur-mesure { background: transparent; }

/* À propos : citation et compteurs */
.citation { margin: 0 0 8px; font: 700 clamp(24px, 2.8vw, 32px)/1.25 var(--titre); color: var(--marine); }
.compteurs { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 8px; }
.compteurs p { color: var(--doux); font-size: 15px; }
.compteurs b { display: block; font: 700 44px/1.1 var(--titre); color: var(--or-texte); }

/* Contact en bloc sombre */
.contact { background: linear-gradient(160deg, #152743, #0F1C33); color: #fff; border-radius: 28px; padding: 64px 32px; }
.contact h2 { color: #fff; font-size: clamp(30px, 4vw, 46px); }
.contact .chapeau, .contact .coordonnees { color: #C9D1DE; }
.contact .coordonnees a { color: #fff; }

/* Barre de rendez-vous fixe sur téléphone */
.barre-rdv { display: none; }
@media (max-width: 760px) {
  .barre-rdv { display: block; position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 20; margin: 0; transform: translateY(150%); transition: transform .3s; }
  .barre-rdv.visible { transform: none; }
  .barre-rdv .bouton { width: 100%; justify-content: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); }
}

/* Apparitions au défilement (seulement si le script tourne) */
.anime .apparait { opacity: 0; transform: translateY(26px); transition: opacity .7s ease-out, transform .7s ease-out; }
.anime .apparait.vu { opacity: 1; transform: none; }

@media (max-width: 980px) {
  .accroche { padding-top: 56px; }
  .accroche .video { transform: none; }
  .alerte-flottante.a1 { left: 8px; } .alerte-flottante.a2 { right: 8px; }
  .douleurs { grid-template-columns: 1fr; }
  .catalogue.en-onglets .fiche.active { grid-template-columns: 1fr; padding: 22px; }
  .catalogue.en-onglets .fiche.active :is(img, .demo-outil) { grid-column: 1; grid-row: auto; margin-bottom: 18px; }
  .ruban { margin-top: 56px; }
}
@media (max-width: 620px) { .contact { padding: 40px 20px; } .alerte-flottante { font-size: 12.5px; padding: 8px 12px; } .accroche h1 em { white-space: normal; } }

/* Mode sombre : le crème et la citation s'adaptent */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fond-creme { background: var(--fond-doux); } :root:not([data-theme="light"]) .citation { color: var(--texte); } }
:root[data-theme="dark"] .fond-creme { background: var(--fond-doux); }
:root[data-theme="dark"] .citation { color: var(--texte); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .onglets button[aria-selected="true"] { background: #C2AE84; color: #152743; border-color: #C2AE84; } }
:root[data-theme="dark"] .onglets button[aria-selected="true"] { background: #C2AE84; color: #152743; border-color: #C2AE84; }

@media (prefers-reduced-motion: reduce) {
  .ruban-piste, .alerte-flottante, .accroche h1 em::after, .catalogue.en-onglets .fiche.active { animation: none; }
  .accroche .video { transform: none; }
}

/* ---------- questionnaire « Présentez votre projet » ---------- */
.questionnaire { max-width: 720px; padding-block: 56px 88px; min-height: 70vh; }
.qz-progression { margin-bottom: 36px; }
.qz-barre { height: 6px; border-radius: 3px; background: var(--trait); overflow: hidden; }
.qz-barre span { display: block; height: 100%; width: 0; background: var(--turquoise-fonce); transition: width .3s ease-out; }
.qz-etape { margin-top: 10px; font-size: 14px; color: var(--doux); }
.questionnaire fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.questionnaire legend, .questionnaire h1 { font: 700 clamp(26px, 3.4vw, 34px)/1.2 var(--titre); padding: 0; margin-bottom: 24px; text-wrap: balance; }
.questionnaire legend:focus, .questionnaire h1:focus { outline: none; }
.qz-aide { color: var(--doux); margin: -12px 0 20px; }
.qz-choix { display: grid; gap: 10px; }
.qz-choix label { display: flex; align-items: center; gap: 14px; padding: 15px 18px; border: 1px solid var(--trait); border-radius: 10px; cursor: pointer; background: var(--fond); transition: border-color .15s, background .15s; }
.qz-choix label:hover { border-color: var(--doux); }
.qz-choix label:has(input:checked) { border-color: var(--turquoise-fonce); background: color-mix(in srgb, var(--turquoise) 8%, var(--fond)); }
.qz-choix input { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--turquoise-fonce); }
.qz-choix label:has(input:focus-visible) { outline: 2px solid var(--or); outline-offset: 2px; }
.qz-champs { display: grid; gap: 16px; margin-top: 18px; }
.qz-champ, .qz-precision { display: grid; gap: 6px; font-size: 15px; font-weight: 600; }
.qz-precision { margin-top: 16px; }
.questionnaire input[type=text], .questionnaire input[type=email], .questionnaire input[type=tel], .questionnaire textarea {
  font: 400 17px var(--corps); color: var(--texte); background: var(--fond); border: 1px solid var(--trait); border-radius: 10px; padding: 13px 14px; width: 100%; }
.questionnaire textarea { resize: vertical; }
.questionnaire input:focus-visible, .questionnaire textarea:focus-visible { outline: 2px solid var(--or); outline-offset: 1px; border-color: var(--turquoise-fonce); }
.qz-confirmation { font-size: 19px; font-weight: 600; margin-bottom: 18px; }
.qz-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.qz-nav { display: flex; gap: 12px; justify-content: space-between; margin-top: 32px; }
.qz-nav .bouton:only-child { margin-left: auto; }
.qz-nav button { cursor: pointer; }
.qz-nav button:disabled { opacity: .6; cursor: wait; }
.qz-erreur { margin-top: 18px; color: #B3261E; font-weight: 600; }
.qz-recap { margin: 0; display: grid; gap: 4px; }
.qz-recap dt { font-size: 14px; color: var(--doux); margin-top: 14px; }
.qz-recap dd { margin: 0; font-weight: 600; }
.qz-rgpd { margin-top: 28px; font-size: 14px; color: var(--doux); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qz-erreur { color: #F2B8B5; } }
:root[data-theme="dark"] .qz-erreur { color: #F2B8B5; }
@media (max-width: 620px) { .questionnaire { padding-block: 36px 64px; } .qz-nav .bouton { flex: 1; justify-content: center; } }
.contact .vers-questionnaire { color: #C9D1DE; font-size: 16px; }
.contact .vers-questionnaire a { color: #fff; font-weight: 600; }
.qz-aide-champ { font-weight: 400; font-size: 14px; color: var(--doux); }
.qz-trouve { font-weight: 600; font-size: 15px; color: var(--turquoise-fonce); min-height: 1.4em; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qz-trouve { color: var(--turquoise); } }
:root[data-theme="dark"] .qz-trouve { color: var(--turquoise); }