@font-face{font-family:'IBM Plex Sans';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-weight:700;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-sans-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-weight:600;font-style:normal;font-display:swap;src:url(/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2')}

:root{--bg:#F4F5F7;--surface:#FFFFFF;--alt:#EDEFF2;--track:#E4E7EB;--border:#DDE1E6;--border2:#C6CCD3;--ink:#15181C;--muted:#5D6570;--soft:#3E454E;--accent:#F28C28;--on-accent:#1A1206;--accent-text:#B45309;--accent-track:#E07B12;--info:#2F5FB3;color-scheme:light dark}
@media (prefers-color-scheme:dark){:root{--bg:#141619;--surface:#1D2024;--alt:#262A2F;--track:#2E3339;--border:#2E3339;--border2:#3D434A;--ink:#ECEEF0;--muted:#9AA1A9;--soft:#C5CAD0;--accent:#FF9F43;--on-accent:#1A1206;--accent-text:#FF9F43;--accent-track:#FF9F43;--info:#8DB8FF}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.5}
a{color:inherit}
.page{min-height:100vh;display:flex;flex-direction:column;gap:96px;padding-bottom:48px}
.mono{font-family:'IBM Plex Mono',ui-monospace,monospace}
.lbl{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);font-weight:600}
.bloc{width:100%;max-width:1180px;margin:0 auto;padding:0 24px}
.carte{padding:28px;border-radius:20px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:12px}
.carte h3{margin:0;font-size:19px;font-weight:700}
.carte p{margin:0;font-size:15px;color:var(--soft)}
.coche{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45}
.coche::before{content:"✓";color:var(--accent-text);font-weight:700}
.info .coche::before{color:var(--info)}
h1,h2{margin:0;font-weight:700}
h2{font-size:36px;line-height:1.15}

.entete{border-bottom:1px solid var(--border);background:var(--surface)}
.entete .bloc{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;min-height:72px;padding-top:12px;padding-bottom:12px}
.marque{display:flex;align-items:center;gap:10px;flex:1;min-width:150px;text-decoration:none}
.marque svg{color:var(--accent-text)}
.marque span{font-size:20px;font-weight:700}
.entete nav{display:flex;flex-wrap:wrap;gap:20px;font-size:15px;font-weight:500;color:var(--soft)}
.entete nav a{text-decoration:none}
.entete nav a:hover{color:var(--ink)}

.hero{display:flex;flex-wrap:wrap;gap:56px;align-items:center;padding-top:8px}
.hero-texte{flex:1 1 480px;min-width:0;display:flex;flex-direction:column;gap:22px}
.hero h1{font-size:56px;line-height:1.05}
.hero p{margin:0;font-size:20px;color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.bouton{min-height:56px;padding:0 22px;border-radius:16px;font-weight:600;font-size:17px;display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.bouton.plein{background:var(--accent);color:var(--on-accent)}
.bouton.contour{background:var(--surface);border:1px solid var(--border2)}
.bientot{font-size:14px;color:var(--muted)}

.tel-zone{flex:1 1 340px;display:flex;justify-content:center}
.tel{width:300px;height:600px;border-radius:40px;border:10px solid var(--ink);background:var(--bg);padding:22px 16px;display:flex;flex-direction:column;gap:12px}
.tel .petit{font-size:13px;color:var(--muted)}
.tel .ligne{padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--border);display:flex;flex-direction:column;gap:6px}
.tel .compte{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.tel .barre{width:100%;height:10px;border-radius:5px;background:var(--track);overflow:hidden}
.tel .barre div{height:10px;width:62%;background:var(--accent-track)}
.tel .plus{height:130px;border-radius:24px;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:600}

.section{display:flex;flex-direction:column;gap:28px}
.section-titre{display:flex;flex-direction:column;gap:10px;max-width:720px}
.section-titre p{margin:0;font-size:17px;color:var(--soft)}
.grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px}
.grille.offres{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.offre h3{font-size:22px}
.offre .prix{font-size:36px;font-weight:600}
.offre .prix-texte{font-size:20px;font-weight:600;color:var(--soft)}
.offre .note{font-size:16px;color:var(--muted);font-family:'IBM Plex Sans',sans-serif;font-weight:500}
.offre.vedette{border:2px solid var(--accent)}
.offre hr{border:0;border-top:1px solid var(--border);margin:4px 0;width:100%}

.donnees{padding:40px;border-radius:24px;background:var(--surface);border:1px solid var(--border);display:flex;flex-wrap:wrap;gap:32px}
.donnees>div:first-child{flex:1 1 320px;display:flex;flex-direction:column;gap:10px}
.donnees>div:last-child{flex:2 1 480px;display:flex;flex-direction:column;gap:14px}
.donnees h2{font-size:30px}

.pied{border-top:1px solid var(--border);padding-top:28px}
.pied .bloc{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;font-size:14px;color:var(--muted)}
.pied .bloc>span{flex:1;min-width:200px}
.pied a{text-decoration:none}
.pied a:hover{color:var(--ink);text-decoration:underline}

/* Pages de texte */
.texte{max-width:760px;display:flex;flex-direction:column;gap:8px}
.texte h1{font-size:40px;line-height:1.1;margin-bottom:8px}
.texte h2{font-size:24px;margin-top:28px}
.texte p,.texte li{font-size:17px;color:var(--soft)}
.texte p{margin:6px 0}
.texte ul{margin:6px 0;padding-left:22px}
.texte li{margin:4px 0}
.texte strong{color:var(--ink)}
.texte .maj{font-size:14px;color:var(--muted)}
.texte a{color:var(--accent-text)}
.encadre{padding:20px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--border);margin:8px 0}
.encadre p{margin:0}

:focus-visible{outline:3px solid var(--info);outline-offset:3px;border-radius:6px}
@media (max-width:640px){
  .page{gap:64px}
  .hero{gap:40px}
  .hero h1{font-size:40px}
  .hero p{font-size:18px}
  h2{font-size:28px}
  .texte h1{font-size:32px}
  .donnees{padding:24px}
  .entete nav{gap:16px;font-size:14px}
  .tel{width:260px;height:520px}
  .tel .plus{height:110px}
}