/* © 2026 JYSSC. La page de présentation de commervance.fr : une seule page, sans script, sans cookie. */
@font-face{ font-family:"Manrope"; src:url("/manrope-latin.woff2") format("woff2"); font-weight:200 800; font-display:swap; }
:root{
  --encre:#1D232B; --encre-2:#4E5968; --discret:#7A8494; --fond:#FFFFFF; --fond-2:#F5F6F8; --trait:#E4E7EC;
  --orange:#F26A1B; --orange-fonce:#C9500B; --orange-doux:#FFF1E7; --bleu:#2463C4; --nuit:#141A22; --nuit-2:#1D2530;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; background:var(--fond); color:var(--encre); font:500 17px/1.6 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:var(--bleu); }
h1, h2{ letter-spacing:-.025em; line-height:1.12; margin:0 0 16px; }
h1{ font-size:clamp(34px, 5.4vw, 58px); font-weight:800; }
h1 span{ color:var(--orange); }
h2{ font-size:clamp(27px, 3.6vw, 40px); font-weight:800; }
.largeur{ max-width:1120px; margin:0 auto; padding:0 20px; }
.sur{ text-transform:uppercase; letter-spacing:.09em; font-size:13px; font-weight:800; color:var(--orange-fonce); margin:0 0 10px; }
.chapeau{ font-size:19px; color:var(--encre-2); max-width:680px; margin:0 0 24px; }
.note{ font-size:14px; color:var(--discret); margin:14px 0 0; }

/* Boutons */
.btn{ display:inline-flex; align-items:center; justify-content:center; min-height:52px; padding:0 24px; border-radius:14px; background:var(--orange);
  color:#fff; font-weight:800; font-size:16px; text-decoration:none; box-shadow:0 8px 22px rgba(242,106,27,.28); transition:transform .15s, box-shadow .15s; }
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(242,106,27,.36); }
.btn.clair{ background:var(--fond); color:var(--encre); box-shadow:inset 0 0 0 2px var(--trait); }
.btn.petit{ min-height:40px; padding:0 16px; font-size:14px; border-radius:11px; box-shadow:none; }
.boutons{ display:flex; flex-wrap:wrap; gap:12px; }
.lien-fleche{ display:inline-block; margin-top:8px; font-weight:800; color:var(--orange-fonce); text-decoration:none; }
.lien-fleche::after{ content:" ›"; }

/* Haut de page */
.haut{ position:sticky; top:0; z-index:5; background:rgba(255,255,255,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--trait); }
.haut-ligne{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px; }
.marque img{ height:30px; width:auto; }
.haut nav{ display:flex; align-items:center; gap:22px; }
.haut nav a:not(.btn){ color:var(--encre-2); text-decoration:none; font-weight:700; font-size:15px; }

/* Accroche */
.accroche{ padding:64px 0 56px; background:radial-gradient(1100px 500px at 85% 10%, var(--orange-doux), transparent 60%); }
.accroche-grille{ display:grid; grid-template-columns:1.15fr .85fr; gap:48px; align-items:center; }

/* Le téléphone (mini-scène) */
.telephone{ justify-self:center; width:290px; border-radius:42px; padding:12px; background:var(--nuit); box-shadow:0 30px 60px rgba(20,26,34,.28); }
.ecran{ position:relative; border-radius:32px; background:#EEF2F7; padding:22px 16px 26px; min-height:520px; font-size:12.5px; color:#0F2440; overflow:hidden; }
.t-date{ margin:0; color:#6E809B; font-weight:700; font-size:11.5px; }
.t-bonjour{ margin:2px 0 12px; font-size:22px; font-weight:800; letter-spacing:-.02em; }
.t-carte{ background:#fff; border-radius:16px; padding:12px; box-shadow:0 4px 14px rgba(15,36,64,.07); }
.t-titre, .t-section{ margin:0 0 8px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; font-weight:800; color:#6E809B; }
.t-obj{ display:flex; justify-content:space-between; font-weight:700; }
.t-barre{ height:6px; border-radius:6px; background:#E1E8F1; margin:5px 0 10px; }
.t-barre i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg, #2463C4, #6AA6F5); }
.t-section{ margin:16px 0 8px; }
.t-arret{ display:flex; align-items:center; gap:10px; background:#fff; border-radius:14px; padding:9px 11px; margin-bottom:7px; box-shadow:0 3px 10px rgba(15,36,64,.06); }
.t-arret b{ font-size:12px; }
.t-arret span{ flex:1; font-weight:700; line-height:1.3; }
.t-arret small{ display:block; font-weight:600; color:#6E809B; font-size:10.5px; }
.t-arret em{ font-style:normal; font-weight:800; font-size:10.5px; color:#B4500F; background:#FDF0E4; border-radius:99px; padding:2px 7px; }
.t-plus{ position:absolute; left:50%; bottom:18px; transform:translateX(-50%); width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  color:#fff; font-size:26px; font-weight:600; background:radial-gradient(circle at 35% 30%, #6AA6F5, #2463C4 70%); box-shadow:0 8px 18px rgba(36,99,196,.4); }

/* Les quatre points */
.bandeau-points{ background:var(--nuit); color:#DCE3EC; padding:30px 0; }
.points{ display:grid; grid-template-columns:repeat(4, 1fr); gap:24px; }
.points p{ margin:0; font-size:15px; color:#A9B5C4; }
.points b{ display:block; color:#fff; font-size:16px; margin-bottom:4px; }
.points b::before{ content:"›"; color:var(--orange); margin-right:8px; font-weight:800; }

/* Parties */
.partie{ padding:84px 0; }
.partie.fonce{ background:var(--nuit); color:#EEF2F7; }
.partie.fonce .chapeau, .partie.fonce .liste li{ color:#B7C2D0; }
.partie.fonce .liste b{ color:#fff; }
.partie.fonce .sur{ color:#FF9A5C; }
.partie.fonce .lien-fleche{ color:#FF9A5C; }
.partie.clair2{ background:var(--fond-2); }
.deux{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.deux.inverse{ grid-template-columns:.9fr 1.1fr; }
.deux.egal{ grid-template-columns:1fr 1fr; align-items:start; }
.liste{ list-style:none; padding:0; margin:0 0 16px; }
.liste li{ position:relative; padding-left:26px; margin:0 0 12px; color:var(--encre-2); }
.liste li::before{ content:""; position:absolute; left:2px; top:.55em; width:8px; height:8px; border-top:3px solid var(--orange); border-right:3px solid var(--orange);
  transform:rotate(45deg); border-radius:1px; }
.liste b{ color:var(--encre); }
.liste.petite li{ font-size:15.5px; margin-bottom:8px; }

/* Mini-scènes */
.scene{ border-radius:24px; padding:22px; background:#fff; box-shadow:0 24px 50px rgba(20,26,34,.12); border:1px solid var(--trait); }
.s-titre{ margin:0 0 14px; font-weight:800; font-size:15px; }
.s-humeurs{ display:flex; gap:8px; margin-bottom:12px; }
.s-humeurs span{ flex:1; text-align:center; padding:8px 0; border-radius:12px; background:var(--fond-2); font-weight:700; font-size:14px; color:var(--encre-2); }
.s-humeurs .actif{ background:#E4F4EA; color:#177A45; box-shadow:inset 0 0 0 2px #9BD5B2; }
.s-texte{ margin:0 0 12px; padding:12px 14px; border-radius:14px; background:var(--fond-2); font-size:15px; color:var(--encre); min-height:76px; }
.s-texte i{ display:inline-block; width:2px; height:1.1em; background:var(--bleu); vertical-align:-3px; margin-left:2px; animation:clignote 1s steps(2) infinite; }
@keyframes clignote{ 50%{ opacity:0; } }
.s-suite{ display:flex; justify-content:space-between; gap:10px; padding:10px 14px; border-radius:12px; background:#E6EEFA; font-size:14px; color:#123A6B; }
.s-envoi{ margin-top:14px; text-align:center; padding:12px; border-radius:12px; background:var(--bleu); color:#fff; font-weight:800; }
.scene-tableau{ background:var(--nuit-2); border-color:#2A3442; color:#EEF2F7; box-shadow:0 24px 50px rgba(0,0,0,.35); }
.s-chiffres{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px; }
.s-chiffres p{ margin:0; background:#141A22; border-radius:14px; padding:12px; font-size:13px; color:#A9B5C4; }
.s-chiffres b{ display:block; font-size:26px; color:#fff; letter-spacing:-.02em; }
.s-barres{ position:relative; display:flex; align-items:flex-end; gap:8px; height:150px; padding:0 4px; border-bottom:1px solid #2F3A49; }
.s-barres i{ flex:1; border-radius:6px 6px 2px 2px; background:linear-gradient(180deg, #6AA6F5, #2463C4); }
.s-barres i.encours{ background:none; border:2px dashed #6AA6F5; }
.s-objectif{ position:absolute; left:0; right:0; bottom:58%; border-top:2px dashed var(--orange); }
.s-legende{ margin:10px 0 0; font-size:13px; color:#8D99A9; }

/* Paramètres */
.cartes{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; }
.carte{ border:1px solid var(--trait); border-radius:18px; padding:22px; background:#fff; }
.carte b{ display:block; font-size:18px; margin-bottom:6px; }
.carte p{ margin:0; color:var(--encre-2); font-size:15.5px; }

/* Prix */
.prix-grille{ display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:start; }
.prix-carte{ background:#fff; border-radius:22px; padding:28px; border:1px solid var(--trait); box-shadow:0 18px 40px rgba(20,26,34,.07); }
.montant{ margin:0; font-size:20px; }
.montant b{ font-size:52px; letter-spacing:-.03em; }
.plus{ margin:4px 0 20px; font-size:20px; color:var(--encre-2); }
.plus b{ color:var(--orange-fonce); font-size:30px; }
.exemples{ width:100%; border-collapse:collapse; background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--trait); }
.exemples caption{ text-align:left; font-weight:800; margin-bottom:10px; }
.exemples th, .exemples td{ padding:13px 16px; text-align:left; border-bottom:1px solid var(--trait); }
.exemples th{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--discret); background:var(--fond-2); }
.exemples tr:last-child td{ border-bottom:0; }

.signature{ font-weight:800; color:var(--encre); }
.contact{ text-align:center; }
.contact .chapeau{ margin-left:auto; margin-right:auto; }
.contact .boutons{ justify-content:center; }

/* Bas de page */
.bas{ background:#0D1218; color:#8D99A9; padding:40px 0; font-size:14px; }
.bas a{ color:#C9D3DF; }
.bas-grille{ display:grid; grid-template-columns:1fr 1fr; gap:18px 40px; }
.bas img{ height:25px; width:auto; margin-bottom:10px; }
.mentions{ grid-column:1 / -1; border-top:1px solid #222B37; padding-top:18px; font-size:13px; }

@media (max-width:900px){
  .accroche-grille, .deux, .deux.inverse, .deux.egal, .prix-grille{ grid-template-columns:1fr; gap:36px; }
  .deux.inverse .scene{ order:2; }
  .points{ grid-template-columns:1fr 1fr; }
  .cartes{ grid-template-columns:1fr; }
  .haut nav a:not(.btn){ display:none; }
}
@media (max-width:560px){
  body{ font-size:16px; }
  .accroche{ padding:40px 0; }
  .partie{ padding:60px 0; }
  .points{ grid-template-columns:1fr; }
  .boutons .btn{ width:100%; }
  .bas-grille{ grid-template-columns:1fr; }
  .marque img{ height:26px; }
}
@media (prefers-reduced-motion:reduce){ .s-texte i{ animation:none; } html{ scroll-behavior:auto; } }