/* Evoria — site vitrine (evoria.pro). Polices hébergées ici : aucun appel à un service tiers. */
@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('fonts/inter.woff2') format('woff2'); font-weight: 300 800; font-display: swap; }

:root {
  --nuit: #0e2b29;
  --nuit-2: #133a37;
  --encre: #1d2b29;
  --encre-douce: #4d5b58;
  --gris: #6b6558;
  --creme: #f6f2ea;
  --papier: #fffdf9;
  --sable: #ece5d8;
  --corail: #cf5b44;
  --corail-fonce: #b44a35;
  --menthe: #9fd8cc;
  --trait: #e3dccd;
  --rayon: 18px;
  --ombre: 0 30px 60px -28px rgba(14, 43, 41, 0.45), 0 10px 24px -12px rgba(14, 43, 41, 0.18);
  --titre: 'Fraunces', Georgia, 'Times New Roman', serif;
  --texte: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--encre); font-family: var(--texte); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; border-radius: 6px; }
.conteneur { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 20; background: rgba(14, 43, 41, 0.92); backdrop-filter: saturate(140%) blur(10px); -webkit-backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 16px; }
.marque { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; color: #fff; }
.marque img { width: 34px; height: 34px; border-radius: 9px; }
.marque span { font-family: var(--titre); font-size: 23px; font-weight: 600; letter-spacing: 0.01em; }
.menu { display: flex; align-items: center; gap: 28px; }
.menu a { color: #cfe0dc; text-decoration: none; font-size: 15px; font-weight: 500; }
.menu a:hover { color: #fff; }
.actions-entete { display: flex; align-items: center; gap: 10px; }

.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 12px; font-weight: 600; font-size: 15.5px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s, transform .15s; white-space: nowrap; }
.bouton:hover { transform: translateY(-1px); }
.bouton-corail { background: var(--corail); color: #fff; }
.bouton-corail:hover { background: var(--corail-fonce); }
.bouton-clair { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.28); }
.bouton-clair:hover { border-color: #fff; }
.bouton-sombre { background: var(--nuit); color: #fff; }
.bouton-sombre:hover { background: var(--nuit-2); }
.bouton-grand { padding: 15px 26px; font-size: 16.5px; border-radius: 14px; }

/* ---------- Bandeau d'ouverture ---------- */
.ouverture { background: radial-gradient(1200px 600px at 85% -10%, rgba(159, 216, 204, 0.16), transparent 60%), linear-gradient(180deg, var(--nuit) 0%, #11332f 100%); color: #fff; padding: 88px 0 0; overflow: hidden; }
.surtitre { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--menthe); }
.surtitre::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--corail); }
.ouverture h1 { font-family: var(--titre); font-weight: 500; font-size: clamp(38px, 6vw, 68px); line-height: 1.06; letter-spacing: -0.015em; margin: 18px 0 22px; max-width: 900px; }
.ouverture h1 em { font-style: italic; color: var(--menthe); font-weight: 400; }
.chapo { font-size: clamp(17px, 2vw, 20px); color: #cfe0dc; max-width: 720px; margin: 0 0 34px; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.reassurance { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 26px 0 0; padding: 0; list-style: none; font-size: 14.5px; color: #b9cfca; }
.reassurance li::before { content: '✓'; color: var(--menthe); font-weight: 700; margin-right: 8px; }
.ecran-ouverture { margin: 64px auto 0; max-width: 1080px; position: relative; }
.cadre { background: #0b2422; border-radius: 16px 16px 0 0; padding: 10px 10px 0; box-shadow: 0 -10px 60px -20px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; }
.cadre .points { display: flex; gap: 6px; padding: 4px 6px 10px; }
.cadre .points i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.cadre img { border-radius: 8px 8px 0 0; width: 100%; height: auto; }

/* ---------- Sections ---------- */
section { padding: 96px 0; }
.titre-section { font-family: var(--titre); font-weight: 500; font-size: clamp(30px, 4vw, 46px); line-height: 1.12; letter-spacing: -0.01em; margin: 12px 0 16px; max-width: 760px; }
.intro { color: var(--encre-douce); font-size: 18px; max-width: 680px; margin: 0; }
.surtitre-clair { font-size: 13.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--corail); }

/* Les outils remplacés */
.remplace { background: var(--papier); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); padding: 44px 0; }
.remplace .conteneur { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; }
.remplace p { margin: 0 14px 0 0; font-weight: 600; color: var(--encre-douce); }
.outil-barre { padding: 7px 14px; border-radius: 999px; background: var(--creme); border: 1px solid var(--trait); color: var(--gris); font-size: 14.5px; text-decoration: line-through; text-decoration-color: rgba(207, 91, 68, 0.75); text-decoration-thickness: 2px; }
.fleche { color: var(--corail); font-size: 22px; font-weight: 700; }
.outil-evoria { padding: 8px 16px; border-radius: 999px; background: var(--nuit); color: #fff; font-family: var(--titre); font-size: 17px; font-weight: 600; }

/* Trois bénéfices */
.benefices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 48px; }
.carte { background: var(--papier); border: 1px solid var(--trait); border-radius: var(--rayon); padding: 30px; }
.carte .icone { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--creme); border: 1px solid var(--trait); margin-bottom: 18px; }
.carte .icone svg { width: 24px; height: 24px; stroke: var(--nuit); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carte h3 { font-family: var(--titre); font-weight: 600; font-size: 22px; margin: 0 0 8px; line-height: 1.25; }
.carte p { margin: 0; color: var(--encre-douce); font-size: 16px; }

/* Rangées fonctionnalité + capture */
.rangee { display: grid; grid-template-columns: 1fr 1.25fr; gap: 56px; align-items: center; margin-top: 88px; }
.rangee.inverse { grid-template-columns: 1.25fr 1fr; }
.rangee.inverse .rangee-texte { order: 2; }
.rangee-texte h3 { font-family: var(--titre); font-weight: 500; font-size: clamp(26px, 3vw, 34px); line-height: 1.15; margin: 10px 0 14px; }
.rangee-texte p { color: var(--encre-douce); margin: 0 0 18px; }
.liste-coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.liste-coches li { position: relative; padding-left: 30px; font-size: 16px; }
.liste-coches li::before { content: ''; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border-radius: 50%; background: var(--nuit) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239fd8cc' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.capture { border-radius: 16px; overflow: hidden; box-shadow: var(--ombre); border: 1px solid var(--trait); background: #fff; }
.capture img { width: 100%; height: auto; }

/* Grille de fonctions */
.fonctions { background: var(--papier); border-top: 1px solid var(--trait); border-bottom: 1px solid var(--trait); }
.grille { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 44px; }
.fonction { padding: 24px; border-radius: 16px; background: var(--creme); border: 1px solid var(--trait); }
.fonction h3 { font-size: 17px; font-weight: 700; margin: 0 0 6px; }
.fonction p { margin: 0; font-size: 15px; color: var(--encre-douce); line-height: 1.55; }
.bientot { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--sable); color: var(--gris); font-size: 12px; font-weight: 600; vertical-align: 2px; }

/* Vos données */
.donnees { background: var(--nuit); color: #fff; }
.donnees .titre-section { color: #fff; }
.donnees .intro { color: #cfe0dc; }
.grille-donnees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-top: 44px; }
.donnee { padding: 26px 28px; border-radius: 16px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); }
.donnee h3 { font-family: var(--titre); font-weight: 600; font-size: 21px; margin: 0 0 8px; }
.donnee p { margin: 0; color: #c3d6d2; font-size: 15.5px; }

/* Pour qui + tarifs */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 44px; }
.duo .carte h3 { font-size: 24px; }
.prix { font-family: var(--titre); font-size: 20px; color: var(--nuit); margin: 14px 0 0; }

/* Appel final */
.final { text-align: center; }
.final .titre-section, .final .intro { margin-left: auto; margin-right: auto; }
.final .boutons { justify-content: center; margin-top: 30px; }
.contact-ligne { margin-top: 18px; color: var(--encre-douce); font-size: 15px; }
.contact-ligne a { color: var(--nuit); font-weight: 600; }

/* Pied de page */
.pied { background: var(--nuit); color: #b9cfca; padding: 44px 0; font-size: 14.5px; }
.pied .conteneur { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px; align-items: center; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.pied a { color: #dfeae7; text-decoration: none; }
.pied a:hover { text-decoration: underline; }

/* Pages juridiques */
.page-texte { background: var(--papier); }
.page-texte .entete-page { background: var(--nuit); color: #fff; padding: 64px 0 52px; }
.page-texte h1 { font-family: var(--titre); font-weight: 500; font-size: clamp(32px, 5vw, 48px); margin: 8px 0 8px; line-height: 1.1; }
.page-texte .maj { color: #b9cfca; margin: 0; font-size: 15px; }
.texte-juridique { max-width: 780px; margin: 0 auto; padding: 56px 24px 96px; font-size: 16.5px; }
.texte-juridique h2 { font-family: var(--titre); font-weight: 600; font-size: 25px; margin: 44px 0 12px; line-height: 1.25; }
.texte-juridique h2:first-child { margin-top: 0; }
.texte-juridique p, .texte-juridique li { color: #2c3a38; }
.texte-juridique a { color: var(--corail-fonce); }
.texte-juridique table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.texte-juridique th, .texte-juridique td { text-align: left; vertical-align: top; padding: 12px 12px; border-bottom: 1px solid var(--trait); }
.texte-juridique th { background: var(--creme); font-weight: 700; color: var(--encre); }
.tableau-defile { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.encadre { background: var(--creme); border: 1px solid var(--trait); border-radius: 14px; padding: 18px 22px; margin: 18px 0; }

/* ---------- Téléphone et tablette ---------- */
@media (max-width: 980px) {
  .grille { grid-template-columns: repeat(2, 1fr); }
  .rangee, .rangee.inverse { grid-template-columns: 1fr; gap: 32px; margin-top: 72px; }
  .rangee.inverse .rangee-texte { order: 0; }
}
@media (max-width: 820px) {
  .menu { display: none; }
  .benefices, .grille-donnees, .duo { grid-template-columns: 1fr; }
  section { padding: 72px 0; }
  .ouverture { padding-top: 56px; }
  .ecran-ouverture { margin-top: 44px; }
}
@media (max-width: 560px) {
  body { font-size: 16px; }
  .conteneur { padding: 0 16px; }
  .grille { grid-template-columns: 1fr; }
  .actions-entete .bouton-clair { display: none; }
  .entete .bouton { padding: 10px 14px; font-size: 14.5px; }
  .boutons .bouton { width: 100%; }
  .carte, .donnee { padding: 24px; }
  .remplace p { width: 100%; text-align: center; margin: 0 0 4px; }
  .texte-juridique { padding: 40px 16px 72px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bouton { transition: none; }
  .bouton:hover { transform: none; }
}

/* Repère d'une information encore à fournir : la mise en ligne est refusée tant qu'il en reste un. */
mark.a-completer { background: #ffe9a8; color: #5a4300; padding: 0 4px; border-radius: 4px; }
section.sans-haut { padding-top: 0; }
.surtitre-clair.menthe { color: var(--menthe); }
.surtitre { align-items: flex-start; }
.surtitre::before { flex: none; margin-top: 0.45em; }