/* ==========================================================================
   Palette BetterCall : la même pour le site, l'appli et l'extension.
   Le logo : une bulle bleu nuit, une fiche corail, sur du rose pâle. Des aplats clairs (un par usage),
   du crème pour les fonds neutres, le bleu nuit pour les boutons et la marque, le corail pour finir la page.
   Les couleurs « appli » ne servent qu'aux fragments de l'interface (cartes de réponse, statuts).
   ========================================================================== */
:root {
  /* Fonds : les surfaces se séparent par un pas de ton, jamais par un filet. */
  --bc-papier: #FFFFFF;
  --bc-papier-2: #FBF6F1;   /* crème */
  --bc-papier-3: #F3ECE4;
  --bc-papier-4: #E8DFD5;
  --bc-blanc: #FFFFFF;
  --bc-appli: #F7F6F3;   /* le fond des fenêtres de l'appli */
  /* Encres */
  --bc-encre: #1B1C19;
  --bc-encre-survol: #000000;
  --bc-encre-douce: #3F403B;
  --bc-encre-pale: #5A5B54;
  /* Le bleu nuit du logo : la marque et les boutons */
  --bc-nuit: #1F2A5C;
  --bc-nuit-survol: #16204A;
  /* Le corail du logo (les variables gardent leur ancien nom « ambre », lu partout) */
  --bc-ambre: #FF7A59;
  --bc-ambre-survol: #FF9273;
  --bc-ambre-pale: #FFF1EC;
  --bc-ambre-champ: #FFE6DE;   /* rose pâle */
  --bc-ambre-encre: #C2462A;
  /* Une couleur par usage : rose corail pour la vente, bleu pour les candidats, vert pour les recruteurs. */
  --bc-bleu-champ: #C9DAFF;  --bc-bleu-pale: #EDF2FF;  --bc-bleu-encre: #2A4C9E;
  --bc-vert-champ: #BDE6C9;  --bc-vert-pale: #E6F5EA;  --bc-vert-encre: #17643E;
  --bc-lilas-champ: #DDD2FF; --bc-lilas-pale: #F2EEFF; --bc-lilas-encre: #553C9E;
  /* Les couleurs de l'appli : chaque type de carte a la sienne (texte foncé, fond pâle). */
  --bc-fiche: #2D5FC4;   --bc-fiche-pale: #E8EEFA;
  --bc-ok: #18714A;      --bc-ok-pale: #E2F1E9;
  --bc-alerte: #B23A33;  --bc-alerte-pale: #FAE8E6;
  --bc-demande: #6A4FC2; --bc-demande-pale: #EEEAFA;
  /* Le bord des fenêtres de l'appli (et des champs de formulaire), seulement là. */
  --bc-filet: #E5E2DA;
  --bc-filet-fort: #CFCBC0;

  /* Une seule police, en trois graisses : 900 pour les titres, 500 pour appuyer, 400 pour lire. */
  --police-titre: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-texte: "Epilogue", system-ui, -apple-system, "Segoe UI", sans-serif;
  --police-main: var(--police-texte);
  --police-ui: "Segoe UI", system-ui, -apple-system, sans-serif;  /* les fenêtres de l'appli, comme sur Windows */
  /* Cinq tailles : notes, texte, chapeau, titres, titre de la page. */
  --step-small: 0.875rem;
  --step-body: 1.125rem;
  --step-lead: clamp(1.3125rem, 1rem + 0.7vw, 1.6875rem);
  --step-head: clamp(2.625rem, 1.2rem + 4.4vw, 5.75rem);
  --step-display: clamp(2.875rem, 1.4rem + 5vw, 6.25rem);

  /* Le cadre : un contenu de 1200 px au plus, une seule paire de marges, partout. */
  --cadre: 1200px;
  --marge: clamp(20px, 5vw, 56px);
  --gouttiere: clamp(16px, 2vw, 28px);
  --rayon: 20px;
  --partie: clamp(88px, 9vw, 136px);
  --bloc: clamp(32px, 4vw, 56px);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ressort: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Anciens noms, lus par les scripts (entrainement.js) : ils pointent sur la palette. */
  --fond: var(--bc-papier);
  --texte: var(--bc-encre);
  --doux: var(--bc-encre-douce);
}

/* La teinte de la page : chaque usage a sa couleur. Les classes t-* la changent pour un seul élément. */
body, .t-vente { --teinte: var(--bc-ambre-champ); --teinte-pale: var(--bc-ambre-pale); --teinte-encre: var(--bc-ambre-encre); }
body[data-usage="entretien"], .t-entretien { --teinte: var(--bc-bleu-champ); --teinte-pale: var(--bc-bleu-pale); --teinte-encre: var(--bc-bleu-encre); }
body[data-usage="recrutement"], .t-recrutement { --teinte: var(--bc-vert-champ); --teinte-pale: var(--bc-vert-pale); --teinte-encre: var(--bc-vert-encre); }
body[data-usage="reunion"], .t-reunion,
.t-lilas { --teinte: var(--bc-lilas-champ); --teinte-pale: var(--bc-lilas-pale); --teinte-encre: var(--bc-lilas-encre); }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; background: var(--bc-papier); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bc-papier); color: var(--bc-encre); font: 400 var(--step-body)/1.55 var(--police-texte);
  overflow-x: clip; overflow-wrap: break-word; container-type: inline-size; font-synthesis: none; -webkit-font-smoothing: antialiased; }
/* Le bord de la page : la marge, et au-delà de 1200 px de contenu, de quoi rester centré. Tout s'aligne dessus. */
body { --bord: max(var(--marge), calc((100cqw - var(--cadre)) / 2)); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}
img, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration-color: var(--bc-ambre); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--bc-encre); outline-offset: 3px; border-radius: 6px; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--bc-encre); }
::selection { background: var(--bc-ambre-champ); color: var(--bc-encre); }
.page, .cadre { width: 100%; margin: 0; padding-left: var(--bord); padding-right: var(--bord); }
.page.etroite, .etroite { --bord: max(var(--marge), calc((100cqw - 820px) / 2)); }
.insecable { white-space: nowrap; }
.grille { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gouttiere); }

/* ---------- Titres : une seule police, très grasse et serrée ---------- */
h1, h2, h3 { text-wrap: balance; }
h1, h2 { font-family: var(--police-titre); font-weight: 900; letter-spacing: -0.04em; line-height: 0.98; margin: 0 0 20px; overflow-wrap: normal; hyphens: manual; }
h1 { font-size: clamp(2.5rem, 1.1rem + 4vw, 5rem); }
h2 { font-size: clamp(2rem, 1.1rem + 3vw, 3.75rem); }
h3 { font-weight: 900; letter-spacing: -0.02em; line-height: 1.2; }
.chapeau { font-size: var(--step-lead); line-height: 1.35; font-weight: 500; margin: 0 0 28px; max-width: 34em; }
.fil { font-size: var(--step-small); color: var(--bc-encre-pale); margin: 28px 0 16px; }
.fil a { color: var(--bc-encre-douce); text-decoration: none; }
.fil a:hover { color: var(--bc-encre); text-decoration: underline; }

/* ---------- En-tête : le nom, trois liens, une action ---------- */
.aller-contenu { position: absolute; left: var(--bord); top: 12px; z-index: 50; background: var(--bc-encre); color: var(--bc-papier); padding: 10px 16px; border-radius: 999px; text-decoration: none; font-weight: 500; transform: translateY(-200%); }
.aller-contenu:focus { transform: none; }
.entete { background: var(--entete-fond, transparent); transition: background-color 700ms var(--ease-out); }
.entete .page, .barre-fixe .page { display: flex; align-items: center; gap: 28px; min-height: 84px; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 19px; letter-spacing: -0.02em; color: var(--bc-nuit); text-decoration: none; flex: none; margin-right: auto; }
.marque svg { width: 30px; height: 30px; flex: none; }
.entete nav, .barre-fixe nav { display: flex; gap: 26px; font-size: 15px; }
.entete nav a, .barre-fixe nav a { color: var(--bc-encre); text-decoration: none; white-space: nowrap; }
.entete nav a:hover, .barre-fixe nav a:hover { text-decoration: underline; text-underline-offset: 5px; }
.entete nav a[aria-current], .barre-fixe nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--bc-encre); text-underline-offset: 5px; }
/* La barre qui reste en haut, une fois l'en-tête passé : une vraie barre fixe, elle a droit à son ombre. */
.barre-fixe { position: fixed; inset: 0 0 auto 0; z-index: 30; background: rgba(255,255,255,.97); transform: translateY(-110%); transition: transform 400ms var(--ease-out); }
.barre-fixe .page { min-height: 64px; }
.barre-fixe.visible { transform: none; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 8px 24px -16px rgba(0,0,0,.25); }
/* Tablette : les quatre usages et le bouton tiennent sur une ligne, plus serrés */
@media (max-width: 1000px) {
  .entete .page, .barre-fixe .page { gap: 18px; }
  .entete nav, .barre-fixe nav { gap: 16px; font-size: 14px; }
  .entete .bouton svg, .barre-fixe .bouton svg { display: none; }
}
@media (max-width: 760px) {
  .entete nav, .barre-fixe nav { display: none; }
  .entete .page { min-height: 72px; }
}
/* Petit téléphone : le nom et le bouton tiennent sur une ligne (le bouton perd sa flèche) */
@media (max-width: 420px) {
  .entete .page, .barre-fixe .page { gap: 14px; }
  .entete .bouton svg, .barre-fixe .bouton svg { display: none; }
}

/* ---------- Boutons : un aplat bleu nuit, tout rond ; le second, blanc ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 26px;
  background: var(--bc-nuit); color: var(--bc-papier); font: 500 17px/1.2 var(--police-texte); text-decoration: none; text-align: center;
  border: 0; border-radius: 999px; cursor: pointer; transition: transform 200ms var(--ease-out), background-color 200ms ease; }
.bouton svg { width: 20px; height: 20px; flex: none; }
.bouton:hover { background: var(--bc-nuit-survol); transform: translateY(-2px); }
.bouton:active { transform: translateY(1px) scale(.98); }
.bouton.petit { min-height: 44px; padding: 8px 20px; font-size: 15px; }
.bouton.second { background: var(--bc-blanc); color: var(--bc-nuit); box-shadow: inset 0 0 0 1.5px var(--bc-nuit); }
.bouton.second:hover { background: var(--bc-papier-2); }
.bouton:disabled { opacity: .45; cursor: default; transform: none; }

/* ---------- Les anciens ornements, désormais sobres ---------- */
.griffon { display: none; }
.surligne { font-style: inherit; }
.pastille { display: inline-block; font: 500 13px/1.3 var(--police-texte); padding: 4px 11px; border-radius: 99px; background: var(--teinte); color: var(--bc-encre); white-space: nowrap; }

/* ---------- Pied : l'adresse en titre, puis une ligne de liens (bleu nuit sur corail) ---------- */
.pied { background: var(--bc-ambre); color: var(--bc-nuit); padding: 56px 0 32px; margin-top: var(--partie); font-size: 15px; }
main:has(> :last-child:is(.fin, .depart, .sans-marge-pied)) + .pied { margin-top: 0; }
.pied-haut { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 40px; }
.pied-haut .marque { margin-right: 0; font-size: 17px; } .pied-haut .marque svg { width: 24px; height: 24px; }
.pied-haut p { margin: 0; max-width: 30ch; }
.pied-haut .haut { margin-left: auto; text-decoration: none; white-space: nowrap; } .pied-haut .haut:hover { text-decoration: underline; }
.contact-cadre { container-type: inline-size; margin-top: clamp(56px, 7vw, 110px); }
/* l'adresse se règle sur la largeur du cadre : elle ne déborde jamais */
.contact { display: inline-block; font-weight: 900; font-size: min(104px, 8.6cqi); letter-spacing: -0.05em; line-height: 0.95; text-decoration: none; }
.contact span { display: block; }
.contact:hover span:last-child { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .08em; text-decoration-color: currentColor; }
.pied-bas { display: grid; grid-template-columns: 1.7fr 1fr auto; gap: 12px 32px; margin-top: 40px; font-size: var(--step-small); align-items: start; }
.pied-bas nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.pied-bas p { margin: 0; }
.pied a { color: var(--bc-nuit); text-decoration: none; }
.pied-bas a:hover { text-decoration: underline; text-decoration-color: currentColor; }
@media (max-width: 900px) { .pied-bas { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pied-haut .haut { margin-left: 0; } }

/* ---------- Liens vers les pages piliers (pages d'usage et pages intérieures) ---------- */
.lien-pilier { margin: 32px 0 0; color: var(--bc-encre-douce); max-width: 60ch; }
.lien-pilier a { color: var(--bc-encre); }

/* ---------- Boîte « pas sur Windows » (vraie boîte de dialogue : elle flotte, elle a son ombre) ---------- */
.boite-pas-windows { max-width: 460px; width: calc(100% - 32px); background: var(--bc-blanc); color: var(--bc-encre); border: 0; border-radius: 20px; padding: 28px; box-shadow: 0 24px 60px rgba(27, 28, 25, .18); }
.boite-pas-windows::backdrop { background: rgba(27, 28, 25, .45); }
.boite-pas-windows strong { font-family: var(--police-titre); font-size: 26px; font-weight: 900; letter-spacing: -0.03em; line-height: 1.1; display: block; margin-bottom: 10px; }
.boite-pas-windows p { color: var(--bc-encre-douce); margin: 0 0 20px; }
.boite-pas-windows .actions-boite { display: grid; gap: 8px; }
.boite-pas-windows button.bouton { border: 0; cursor: pointer; font: inherit; }
.etapes-mac { margin: 0 0 16px; padding-left: 22px; color: var(--bc-encre); display: grid; gap: 8px; line-height: 1.45; }
/* Windows et Mac côte à côte : le système du visiteur passe devant (site.js) */
.deux-systemes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deux-systemes .bouton { justify-content: center; }

/* ---------- Tableaux et texte courant ---------- */
table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--bc-filet); vertical-align: top; }
th { font-weight: 500; }
code { background: var(--bc-papier-3); border-radius: 6px; padding: 1px 6px; font-size: .92em; }

/* ---------- L'arrivée des blocs, une fois ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-in] { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-in].vu { opacity: 1; transform: none; }
}