/* L'accueil sur fond blanc, variante « Ciel » de la maquette (Vincent, 23/10/2026).
   Chargé après commun.css par accueil.html et accueil-en.html seulement : les autres pages restent sombres.
   Pour revenir à l'accueil sombre, retirer le <link> de ces deux pages (archive dans le vault, Assets/please-send-it-maquettes). */
@font-face{font-family:"DM Sans";src:url(/static/dm-sans.woff2) format("woff2");font-weight:400 700;font-display:swap}

/* 1. Les couleurs : les jetons de commun.css redéfinis sur le corps de la page */
html:has(> body.accueil){background:#fff;color-scheme:light}
body.accueil{
  --fond:#fff; --fond-haut:#fff; --carte:#fff; --carte-2:#F4F7FD; --texte:#0F1B33; --discret:#56627A;
  --bord:#E3EAF7; --bord-fort:#D2DCEF; --piste:#E6ECF7;
  --accent:#2D6BFF; --accent-fonce:#1F55D6; --accent-doux:#E8EFFF; --sur-accent:#fff;
  --ok:#1F9D63; --ok-doux:#E4F6EC; --attente:#C46A0A; --attente-doux:#FFF2DE; --erreur:#D93B30; --erreur-doux:#FDE8E6;
  --lueur:transparent; --lueur-froide:transparent; --ombre:0 14px 34px -20px rgba(20,32,70,.28);
  --titre:"DM Sans",ui-sans-serif,system-ui,sans-serif;
  color-scheme:light; color:var(--texte); background:#fff;
  font-family:"DM Sans","Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
body.accueil::before,body.accueil::after{display:none}
body.accueil h1,body.accueil h2{letter-spacing:-.03em}
body.accueil .barre{background:color-mix(in srgb,#fff 86%,transparent);border-bottom-color:transparent}
body.accueil .btn{border-radius:999px}
body.accueil .btn.primaire{box-shadow:0 8px 24px -12px var(--accent)}

/* 2. Le premier écran */
body.accueil .a-une{display:block;min-height:0;overflow:visible;background:linear-gradient(180deg,#EAF2FF 0,#fff 560px);padding:0 16px}
body.accueil .a-une::after{display:none}
body.accueil .a-une-texte{position:relative;max-width:1000px;margin:0 auto;padding:64px 0 34px;text-align:center;display:flex;flex-direction:column;align-items:center}
body.accueil .a-une .a-sur{color:var(--accent);letter-spacing:.08em;font-size:13px;margin-bottom:14px}
body.accueil .a-une h1{max-width:none;font-weight:700;font-size:clamp(38px,6.6vw,76px);line-height:1.03;letter-spacing:-.045em;color:var(--texte)}
body.accueil .a-une .a-chapo{color:var(--discret);font-size:clamp(17px,1.6vw,20px);line-height:1.5;max-width:34em;margin:20px auto 22px}
body.accueil .a-une .a-chapo b{color:var(--texte)}
body.accueil .a-une .a-canaux{justify-content:center;gap:8px;margin:0 0 26px}
body.accueil .a-une .a-canaux li{background:#fff;border:1px solid var(--bord);color:var(--texte);font-size:14px;font-weight:500;padding:7px 12px 7px 10px}
body.accueil .a-une .a-canaux li span{color:var(--texte)}
body.accueil .a-une .a-canaux li svg{width:18px;height:18px}
body.accueil .a-une .a-canaux li.bientot{opacity:.55;background:#fff}
body.accueil .a-une .a-canaux li.bientot::after{content:"bientôt";font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-left:2px;color:var(--discret)}
html[lang="en"] body.accueil .a-une .a-canaux li.bientot::after{content:"soon"}
body.accueil .a-une .actions{justify-content:center;gap:10px}
body.accueil .a-une .actions .btn{min-height:50px;padding:0 22px;font-size:16px}
body.accueil .a-une .actions .btn:not(.primaire){background:#fff;border:1.5px solid var(--bord-fort);color:var(--texte)}
body.accueil .a-une .a-rassure{margin-top:12px}

/* la scène : le panneau bleu, les bulles de Tom, Tom, le suivi */
.a-ciel{max-width:980px;margin:0 auto;background:linear-gradient(180deg,#DCE9FF,#EEF4FF);border-radius:32px;padding:30px 30px 0;
  display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:end}
.a-ciel-bulles{display:grid;gap:18px;align-self:start;justify-self:end;max-width:260px;padding-top:20px;padding-bottom:30px}
.a-ciel-bulle{display:block;margin:0;background:#fff;border-radius:20px 20px 20px 6px;padding:14px 16px;font-size:15px;line-height:1.4;color:var(--texte);box-shadow:0 10px 30px -12px rgba(20,20,40,.25)}
.a-ciel-bulle svg{display:inline-block;width:20px;height:20px;margin-right:7px;vertical-align:-4px;color:var(--accent)}
.a-ciel-tom{width:280px;height:auto;display:block}
.a-ciel-suivi{list-style:none;margin:0;padding:10px;align-self:center;max-width:240px;width:100%;background:#fff;border-radius:20px;box-shadow:0 18px 40px -18px rgba(20,20,40,.28);display:grid;gap:4px}
.a-ciel-suivi li{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-weight:600;font-size:15px}
.a-ciel-suivi i{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--ok-doux);color:var(--ok);flex:none}
.a-ciel-suivi li.relance i{background:var(--accent-doux);color:var(--accent)}
.a-ciel-suivi small{display:block;font-weight:500;font-size:13px;color:var(--discret)}
@media (max-width:760px){
  body.accueil .a-une-texte{padding:52px 0 26px}   /* les drapeaux de langue sont posés en haut à droite */
  body.accueil .a-une .actions{width:100%}
  .a-ciel{grid-template-columns:1fr;padding:20px 20px 0;gap:14px;border-radius:26px}
  .a-ciel-bulles{justify-self:stretch;max-width:none;padding:0;gap:12px}
  .a-ciel-suivi{max-width:none}
  .a-ciel-tom{justify-self:center;width:220px}
}

/* 3. Les blocs de la page : les textes écrits en clair en dur dans commun.css */
body.accueil .a-chapo,body.accueil .a-etapes span,body.accueil .a-jobs p,body.accueil .a-accomp-liste span,body.accueil .a-24h,body.accueil .rg-note{color:var(--discret)}
body.accueil .a-confiance p{color:var(--discret)}
body.accueil .sc-cadenas{color:#fff;box-shadow:0 6px 16px -6px rgba(45,107,255,.6)}
body.accueil .sc-carte{box-shadow:0 14px 30px -10px rgba(20,32,70,.3)}
body.accueil .sc-efface{background:var(--carte-2)}
body.accueil .a-profil small{color:var(--discret)}
body.accueil .pied-site{background:#F5F8FD;border-top-color:var(--bord)}

/* 4. Bandes alternées (Vincent, 23/10/2026, 18h42) : le premier écran reste clair, puis un bloc sur deux passe en bleu nuit,
   en commençant par « Simple. Automatique. » ; le fond déborde sur toute la largeur de la fenêtre (ombre portée découpée) */
body.accueil .a-contenu > section{border-top:0}
body.accueil .a-contenu > section:nth-of-type(odd){
  --fond:#0F1B33; --carte:#16264A; --carte-2:#1B2D56; --texte:#F2F5FB; --discret:#A9B6CF;
  --bord:rgba(255,255,255,.10); --bord-fort:rgba(255,255,255,.18); --piste:#22355F;
  --accent:#6E9BFF; --accent-fonce:#9DBCFF; --accent-doux:#1C2F5A; --sur-accent:#0B1630;
  --ok:#5FD39A; --ok-doux:#163A33; --attente:#F2B872; --attente-doux:#3A2E1D; --ombre:none;
  color-scheme:dark; color:var(--texte); background:var(--fond);
  box-shadow:0 0 0 100vmax var(--fond); clip-path:inset(0 -100vmax);
}
body.accueil .a-contenu > section:nth-of-type(odd) .btn:not(.primaire){background:transparent;color:var(--texte);border-color:var(--bord-fort)}

/* bouton du mot de bienvenue, en haut à droite du panneau de Tom (Vincent, 27/10/2026) */
.a-ciel{position:relative}
.a-ecouter{position:absolute;right:22px;top:16px;z-index:2;display:inline-flex;align-items:center;gap:10px;white-space:nowrap;background:#fff;border:1px solid var(--bord);border-radius:999px;padding:8px 16px 8px 8px;font-family:inherit;font-weight:600;font-size:15px;line-height:1.2;color:var(--texte);cursor:pointer;box-shadow:0 14px 30px -14px rgba(20,20,40,.35);transition:box-shadow .15s,border-color .15s}
.a-ecouter:hover{border-color:var(--accent)}
.a-ecouter-rond{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none}
.a-ecouter .pause{display:none}
.a-ecouter.en-cours .lecture{display:none}
.a-ecouter.en-cours .pause{display:block}
.a-ecouter small{color:var(--discret);font-weight:500;font-size:13px}
.a-ecouter-note{color:var(--accent);flex:none}
/* il flotte doucement pour attirer l'œil sans crier ; arrêté pendant la lecture et pour qui réduit les animations (Vincent, 27/10/2026) */
@keyframes a-flotte{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.a-ecouter{animation:a-flotte 3.6s ease-in-out infinite}
.a-ecouter:hover,.a-ecouter.en-cours{animation-play-state:paused}
@media (prefers-reduced-motion:reduce){.a-ecouter{animation:none}}
@media (max-width:760px){.a-ecouter{position:static;justify-self:center;margin:2px 0 -4px}}

/* 5. Le téléphone du bloc « Une expérience agréable » : proportions d'un iPhone récent (capture 390 x 844), coins d'iPhone,
   bord sombre régulier, îlot dynamique posé par le cadre (Vincent, 27/10/2026) */
body.accueil .a-telephone{position:relative;width:300px;padding:11px;border-radius:52px;background:#0B1222;border:1px solid rgba(255,255,255,.16);
  box-shadow:0 0 0 1.5px #2A3550,0 40px 70px -30px rgba(10,20,50,.55)}
body.accueil .a-telephone img{border-radius:41px;aspect-ratio:390/844}
body.accueil .a-telephone::before{content:"";position:absolute;top:20px;left:50%;width:88px;height:26px;margin-left:-44px;border-radius:13px;background:#0B1222}
@media (max-width:420px){body.accueil .a-telephone{width:280px;border-radius:49px;padding:10px}body.accueil .a-telephone img{border-radius:39px}
  body.accueil .a-telephone::before{top:18px;width:82px;height:24px;margin-left:-41px}}

/* 6. La signature électronique : les usages en pastilles (Vincent, 27/10/2026) */
body.accueil .a-sign-usages{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;max-width:720px}
body.accueil .a-sign-usages li{background:var(--accent-doux);color:var(--accent-fonce);font-weight:600;padding:8px 16px;border-radius:999px;font-size:1rem}