/* ==========================================================================
   IMPRA — LE LANGAGE DU SITE (25/10/2026)

   Une seule feuille de fond pour les pages qui ne sont pas l'accueil :
   /tarifs, /aide, /essai, /essai/succes, /groupe. Elle remplace, sur ces
   pages, la pile du benchmark V1 (baseline/, tokens, signature, composition,
   polish) qui leur donnait l'allure de l'ancienne homepage : Plus Jakarta
   Sans en graisse fine, mot en italique, surtitre « / TARIFS », boutons pilule.

   Tout est relevé sur la homepage actuelle, au pixel, pour que les pages
   appartiennent au même site :
     · une seule famille, Schibsted Grotesk — titres en 600, corps en 400 ;
     · navy #0F172E pour l'encre et l'action, bleu IMPRA #1F74E7 pour la
       sélection seulement, fonds #FFFFFF / #F7F8FA, bordure #DCE3F0 ;
     · boutons de 48 px au rayon 10, cartes au rayon 20, carte finale et
       pied de page identiques à ceux de l'accueil.

   L'en-tête commun garde sa feuille générée (entete.impra.css), chargée
   après celle-ci. Aucune couleur n'est écrite ailleurs que dans les jetons.
   ========================================================================== */

/* ── 1 · Jetons ─────────────────────────────────────────────────────────── */
:root {
  --s-police: "Schibsted Grotesk", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --s-encre: #0F172E;          /* texte, action, fonds sombres */
  --s-encre-2: #1C2A44;        /* survol de l'action */
  --s-encre-3: #141F38;        /* appui */
  --s-texte: #0F172E;
  --s-doux: #5B6478;           /* texte secondaire — 5,9:1 sur blanc */
  --s-doux-2: #667080;         /* chapeaux — 4,9:1 sur blanc */
  --s-trait: #DCE3F0;          /* bordure des cartes et des champs */
  --s-trait-2: #E8EDF4;        /* séparation interne */
  --s-blanc: #FFFFFF;
  --s-gris: #F7F8FA;           /* fond des sections claires de l'accueil */
  --s-gris-2: #F0F3F8;         /* rail des contrôles segmentés */
  --s-teinte: #F3F7FE;         /* sélection, formule recommandée */
  --s-bleu: #1F74E7;           /* sélection, focus */
  --s-lien: #155FC4;           /* liens sur fond clair — 6,1:1 */
  --s-bleu-encre: #4D94F5;     /* accent sur navy — 5,8:1 */
  --s-sur-encre: #F4F7FA;      /* texte et bouton clair sur navy */
  --s-sur-encre-doux: rgba(244, 247, 250, 0.72);
  --s-sur-encre-trait: rgba(244, 247, 250, 0.14);
  --s-vert: #157347;           /* valeur favorable — 5,6:1 sur blanc */
  --s-vert-fond: #EAF6EF;
  --s-rouge: #B42318;          /* erreur — 6,5:1 sur blanc */
  --s-rouge-fond: #FEF3F2;
  --s-ambre: #B54708;
  --s-ambre-fond: #FFF6ED;

  /* L'ombre du bouton d'action de la coque V3 du SaaS (--shadow-button-v3), la
     même que celle du bouton de l'en-tête commun : le site et le produit ont
     le même bouton. */
  --s-ombre-bouton: inset 0 1px 0 rgba(244, 247, 250, 0.10), 0 1px 2px rgba(15, 23, 46, 0.20);
  --s-r-bouton: 10px;
  --s-r-champ: 10px;
  --s-r-carte: 20px;
  --s-r-panneau: 24px;
  --s-ombre-flottant: 0 24px 48px -24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.05);

  /* Le cadre : une seule paire de marges, celle de l'en-tête commun — le logo,
     les titres et les cartes partent du même bord. */
  --s-marge: clamp(20px, 2.2vw, 56px);
  --s-largeur: 1376px;
  --s-rythme: clamp(72px, 8.4vw, 128px);

  --s-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --s-ease-ui: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 767px) { :root { --s-marge: clamp(16px, 5vw, 24px); } }

/* ── 2 · Base ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 96px; }
body {
  margin: 0;
  font-family: var(--s-police);
  font-size: 16px; line-height: 1.6; letter-spacing: -0.006em;
  color: var(--s-texte); background: var(--s-blanc);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, fieldset) { margin: 0; }
:where(ul[class], ol[class]) { padding: 0; list-style: none; }
/* Schibsted Grotesk rend aussi le point et la virgule « tabulaires » : les
   chiffres alignés se demandent au cas par cas (tableaux), jamais sur tout le texte. */
fieldset { padding: 0; border: 0; min-width: 0; }
legend { padding: 0; }
img, svg, video, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
table { border-collapse: collapse; }
b, strong { font-weight: 600; }

::selection { background: rgba(31, 116, 231, 0.18); color: var(--s-encre); }
:focus-visible { outline: 2px solid var(--s-bleu); outline-offset: 3px; border-radius: 4px; }
html { scrollbar-color: #C4CDDB transparent; }
input, textarea { caret-color: var(--s-bleu); }

.visually-hidden, .sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Les icônes du tunnel et de l'aide : définies une fois dans un <svg>, jamais affichées seules. */
.ic-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── 3 · Cadre et rythme ────────────────────────────────────────────────── */
.s-cadre { width: min(var(--s-largeur), 100% - 2 * var(--s-marge)); margin-inline: auto; }
.s-section { padding-block: var(--s-rythme); }
.s-section--serree { padding-block: clamp(48px, 5.6vw, 80px); }
.s-fond-blanc { background: var(--s-blanc); }
.s-fond-gris { background: var(--s-gris); }

/* ── 4 · Typographie ───────────────────────────────────────────────────────
   Quatre tailles font le travail visible : titre de page, titre de section,
   chapeau, corps. Le reste est du petit texte (14 px). */
.s-h1 {
  font-size: clamp(34px, 4.4vw, 64px); line-height: 1.04; font-weight: 600;
  letter-spacing: -0.032em; text-wrap: balance;
}
.s-h2 {
  font-size: clamp(30px, 3.1vw, 44px); line-height: 1.16; font-weight: 600;
  letter-spacing: -0.024em; text-wrap: balance;
}
.s-chapeau {
  font-size: clamp(17px, 1.35vw, 20px); line-height: 1.55; color: var(--s-doux);
  letter-spacing: -0.01em; text-wrap: pretty;
}
.s-petit { font-size: 14px; line-height: 20px; color: var(--s-doux); }

.s-lien {
  color: var(--s-lien); font-weight: 500;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px;
  text-decoration-color: rgba(21, 95, 196, 0.35);
  transition: text-decoration-color 0.2s var(--s-ease-ui), color 0.2s var(--s-ease-ui);
}
.s-lien:hover { text-decoration-color: currentColor; }

/* ── 5 · Boutons ───────────────────────────────────────────────────────────
   Ceux de l'accueil : 48 px, rayon 10, navy plein ou contour discret ; sur
   navy, le plein devient clair. Un bouton occupé garde sa largeur. */
.s-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 20px; border-radius: var(--s-r-bouton);
  border: 1px solid transparent; background: none;
  font-size: 16px; line-height: 24px; font-weight: 500; letter-spacing: -0.005em; white-space: nowrap;
  transition: background-color 0.2s var(--s-ease-ui), border-color 0.2s var(--s-ease-ui),
              color 0.2s var(--s-ease-ui), transform 0.2s var(--s-ease), box-shadow 0.2s var(--s-ease-ui);
  -webkit-tap-highlight-color: transparent;
}
.s-btn svg { width: 17px; height: 17px; flex: none; transition: transform 0.25s var(--s-ease); }
.s-btn:hover svg { transform: translateX(3px); }
.s-btn:active { transform: translateY(1px); }
.s-btn--plein { background: var(--s-encre); color: var(--s-sur-encre); box-shadow: var(--s-ombre-bouton); }
.s-btn--plein:hover { background: var(--s-encre-2); }
.s-btn--plein:active { background: var(--s-encre-3); }
.s-btn--contour { border-color: rgba(15, 23, 46, 0.18); color: var(--s-encre); background: var(--s-blanc); }
.s-btn--contour:hover { border-color: rgba(15, 23, 46, 0.42); background: var(--s-gris); }
.s-btn--clair { background: var(--s-sur-encre); color: var(--s-encre); }
.s-btn--clair:hover { background: #FFFFFF; }
.s-btn--contour-clair { border-color: rgba(244, 247, 250, 0.34); color: var(--s-sur-encre); }
.s-btn--contour-clair:hover { border-color: rgba(244, 247, 250, 0.7); background: rgba(244, 247, 250, 0.06); }
.s-btn--large { width: 100%; }
.s-btn--grand { min-height: 54px; font-size: 17px; padding: 0 24px; }
.s-btn:disabled, .s-btn[aria-disabled="true"] { cursor: not-allowed; box-shadow: none; transform: none; }
.s-btn--plein:disabled { background: #C9D1DE; color: #F7F8FA; }
.s-btn.is-occupe { cursor: progress; pointer-events: none; opacity: 0.86; }
.s-btn.is-occupe::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  animation: s-tourne 0.8s linear infinite;
}
@keyframes s-tourne { to { transform: rotate(360deg); } }

/* ── 6 · Contrôle segmenté (mensuel / annuel) ──────────────────────────────
   Le même partout : /tarifs, le tunnel. Les deux radios restent de vrais
   radios ; l'option choisie porte elle-même le fond blanc — chaque libellé a
   sa largeur, rien ne se décale quand « 2 mois offerts » prend de la place. */
.bascule {
  position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: auto; align-items: stretch; gap: 2px;
  padding: 4px; border-radius: 12px; background: #E9EDF4;
}
.bascule input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.bascule label {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 18px; border-radius: 9px; cursor: pointer;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--s-doux); white-space: nowrap;
  transition: color 0.2s var(--s-ease-ui), background-color 0.25s var(--s-ease);
}
.bascule label:hover { color: var(--s-encre); }
.bascule input:checked + label { color: var(--s-encre); background: var(--s-blanc); }
.bascule input:focus-visible + label { outline: 2px solid var(--s-bleu); outline-offset: 1px; }
.bascule__curseur { display: none; }
/* Avec le script (tarifs.impra.js) : un curseur blanc glisse sous l'option
   choisie — position et largeur lues sur l'étiquette cochée. */
.bascule.a-curseur .bascule__curseur {
  display: block; position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0;
  width: var(--curseur-l, 0px); transform: translateX(var(--curseur-x, 0px));
  border-radius: 9px; background: var(--s-blanc); box-shadow: 0 1px 2px rgba(15, 23, 46, 0.08);
  transition: transform 0.38s var(--s-ease), width 0.38s var(--s-ease);
}
.bascule.a-curseur label { position: relative; z-index: 1; }
.bascule.a-curseur input:checked + label { background: transparent; }
@media (prefers-reduced-motion: reduce) {
  .bascule.a-curseur .bascule__curseur { transition: none; }
}
.bascule__badge {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px;
  font-size: 13px; line-height: 1; font-weight: 600; color: var(--s-vert); background: var(--s-vert-fond);
}
@media (max-width: 767px) {
  .bascule { grid-auto-columns: 1fr; }
  .bascule label { padding: 0 12px; }
}

/* ── 7 · Champs de formulaire ───────────────────────────────────────────────
   Classes conservées des scripts (essai.impra.js, aide.impra.js, groupe) :
   .champ, .champ__erreur, .champ__aide, .is-invalide. */
.champs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 16px; }
.champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.champ--plein { grid-column: 1 / -1; }
.champ label, .champ__label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: 15px; line-height: 20px; font-weight: 500; color: var(--s-encre);
}
.champ__aide { font-size: 14px; line-height: 20px; font-weight: 400; color: var(--s-doux); }
.champ input, .champ select, .champ textarea {
  width: 100%; min-height: 48px; padding: 12px 14px;
  border: 1px solid var(--s-trait); border-radius: var(--s-r-champ); background: var(--s-blanc);
  font-size: 16px; line-height: 22px; color: var(--s-encre);
  transition: border-color 0.18s var(--s-ease-ui), box-shadow 0.18s var(--s-ease-ui), background-color 0.18s var(--s-ease-ui);
  -webkit-appearance: none; appearance: none;
}
.champ textarea { min-height: 132px; resize: vertical; }
.champ select {
  padding-right: 42px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6478' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.champ input::placeholder, .champ textarea::placeholder { color: #6B7385; }   /* 4,8:1 sur blanc */
.champ input:hover, .champ select:hover, .champ textarea:hover { border-color: #C4CDDB; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none; border-color: var(--s-bleu); box-shadow: 0 0 0 4px rgba(31, 116, 231, 0.14);
}
.champ.is-invalide input, .champ.is-invalide select, .champ.is-invalide textarea {
  border-color: var(--s-rouge); box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.08);
}
.champ__erreur { font-size: 14px; line-height: 20px; color: var(--s-rouge); }
.champ__erreur:empty { display: none; }
.champ--piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 620px) {
  .champs { grid-template-columns: minmax(0, 1fr); }
}

/* Messages : une erreur dit le problème et la suite ; une note informe. */
.essai-note {
  padding: 14px 16px; border-radius: 12px;
  background: var(--s-teinte); color: var(--s-encre); font-size: 15px; line-height: 23px;
}
.essai-erreur {
  margin-top: 20px; padding: 14px 16px; border-radius: 12px;
  background: var(--s-rouge-fond); color: var(--s-rouge); font-size: 15px; line-height: 23px;
}

/* ── 8 · Questions fréquentes (celles de l'accueil) ──────────────────────
   Relevées sur la homepage le 26/10/2026 : titre de 34 px à gauche, sous lui
   l'encart « Une question particulière ? », la liste à droite ; questions
   en 18 px, réponses en 16 px #2A3656. */
.s-faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px 72px; align-items: start; }
.s-faq__intro { position: sticky; top: 120px; display: grid; justify-items: start; gap: 18px; }
.s-faq__intro .s-h2 { font-size: clamp(28px, 2.4vw, 34px); line-height: 1.24; letter-spacing: -0.022em; max-width: 14em; }
.s-faq__chapeau { max-width: 30em; font-size: 16px; line-height: 26px; color: #2A3656; text-wrap: pretty; }
.s-faq__appel { margin-top: 10px; padding: 22px 24px; border-radius: 16px; background: var(--s-papier); box-shadow: inset 0 0 0 1px rgba(15, 23, 46, 0.07); }
.s-faq__appel-titre { font-size: 17px; line-height: 24px; font-weight: 600; color: var(--s-encre); }
.s-faq__appel-texte { margin-top: 4px; font-size: 15px; line-height: 23px; color: #2A3656; }
.s-faq__appel .s-lien-fleche { margin-top: 14px; }
.s-faq__liste { border-top: 1px solid var(--s-trait); }
.s-faq__item { border-bottom: 1px solid var(--s-trait); }
.s-faq__item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: 18px; line-height: 26px; font-weight: 600; letter-spacing: -0.008em;
  transition: color 0.2s var(--s-ease-ui);
}
.s-faq__item summary::-webkit-details-marker { display: none; }
.s-faq__item summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.3s var(--s-ease);
}
.s-faq__item[open] summary::after { transform: rotate(180deg); }
.s-faq__item summary:hover { color: var(--s-lien); }
.s-faq__item p { padding: 0 48px 24px 0; max-width: 64ch; color: #2A3656; font-size: 16px; line-height: 26px; }
@media (max-width: 899px) {
  .s-faq { grid-template-columns: minmax(0, 1fr); }
  .s-faq__intro { position: static; }
  .s-faq__item p { padding-right: 0; }
}
@media (max-width: 767px) {
  .s-faq__item summary { padding: 16px 0; font-size: 16px; line-height: 23px; }
}

/* ── 9 · Carte finale (celle de l'accueil) ──────────────────────────────────
   Le parc VO en fin de journée (la photo de l'accueil), le voile de lecture à
   gauche, le surtitre bleu, deux actions. Relevée le 26/10/2026 : section au
   dégradé ardoise, carte au rayon 24, ombre portée profonde. */
.s-finale-section { padding-block: clamp(32px, 6vw, 108px); background: linear-gradient(180deg, #FBFCFE 0%, #EDF1F8 46%, #E6ECF6 100%); }
.s-finale {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 490px; border-radius: var(--s-r-panneau);
  display: flex; align-items: center; color: #FFFFFF; background: var(--s-encre);
  box-shadow: 0 50px 100px -50px rgba(15, 23, 46, 0.6);
}
.s-finale__fond { position: absolute; inset: 0; z-index: -1; }
/* L'image remplit la carte : son cadre (picture) aussi, sinon elle garde sa
   hauteur propre et le bas de la carte reste navy. */
.s-finale__fond picture { position: absolute; inset: 0; }
.s-finale__fond img { width: 100%; height: 100%; object-fit: cover; object-position: 74% 52%; }
.s-finale__fond::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(15, 23, 46, 0.95) 0%, rgba(15, 23, 46, 0.86) 30%, rgba(15, 23, 46, 0.42) 58%, rgba(15, 23, 46, 0.1) 78%, rgba(15, 23, 46, 0.04) 100%),
    linear-gradient(180deg, rgba(15, 23, 46, 0) 58%, rgba(15, 23, 46, 0.34) 100%);
}
.s-finale__texte { display: grid; justify-items: start; max-width: 620px; padding: 64px clamp(28px, 4.5vw, 72px); }
.s-finale__texte .s-surtitre { margin-bottom: 10px; font-size: 18px; line-height: 28px; color: var(--s-bleu-encre); }   /* l'accueil le porte en 18 px dans sa carte finale */
.s-finale__texte .s-h2 { color: #FFFFFF; font-size: clamp(30px, 3vw, 44px); line-height: 1.1; letter-spacing: -0.022em; text-wrap: wrap; }
.s-finale__texte p:not(.s-surtitre) { margin-top: 16px; color: rgba(244, 247, 250, 0.72); font-size: 18px; line-height: 28px; max-width: 30em; }
.s-finale__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.s-finale .s-btn--clair { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24); }
.s-finale .s-btn--contour-clair { border-color: rgba(255, 255, 255, 0.4); color: #FFFFFF; }
.s-finale :focus-visible { outline-color: var(--s-bleu-encre); }
@media (max-width: 1279px) { .s-finale__fond img { object-position: 78% 50%; } }
@media (max-width: 767px) {
  .s-finale { align-items: flex-start; min-height: 600px; padding-bottom: 220px; }
  .s-finale__fond img { object-position: 50% 100%; }
  .s-finale__fond::after {
    background: linear-gradient(180deg, rgba(15, 23, 46, 0.97) 0%, rgba(15, 23, 46, 0.92) 44%, rgba(15, 23, 46, 0.46) 66%, rgba(15, 23, 46, 0.12) 86%, rgba(15, 23, 46, 0.22) 100%);
  }
  .s-finale__texte { padding: 40px 24px 0; }
  .s-finale__texte .s-surtitre { font-size: 13px; line-height: 18px; }
  .s-finale__texte .s-h2 { font-size: min(8.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em; }
  .s-finale__actions .s-btn { flex: 1 1 100%; min-height: 50px; border-radius: 13px; font-weight: 600; }
}

/* ── 10 · Pied de page (celui de l'accueil) ─────────────────────────────
   Relevé sur la homepage le 26/10/2026 : cadre de 1 400 px au plus, à la
   gouttière du site en marge intérieure, logo de 24 px (32 px au téléphone), titres de colonne en capitales de 13 px, liens
   sur 32 px de haut (44 px au doigt). */
.pied-impra { background: var(--s-encre); color: #FFFFFF; }
.pied-impra > .s-cadre { width: 100%; max-width: 1400px; padding: 72px var(--s-marge) 36px; }
.pied-impra-haut { display: grid; grid-template-columns: 1.3fr repeat(4, minmax(0, 1fr)); gap: 40px 24px; }   /* Lot B : quatre colonnes de liens (Produit, Métiers, Ressources, Offres et aide) */
.pied-impra-marque .marque { display: inline-flex; align-items: center; min-height: 24px; }
.pied-impra-marque .logo-impra { height: 24px; width: auto; color: #FFFFFF; }
.pied-impra-marque p { margin-top: 20px; max-width: 300px; font-size: 16px; line-height: 26px; color: rgba(255, 255, 255, 0.72); }
.pied-impra-colonne h2 { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.56); }
.pied-impra ul { margin: 16px 0 0; padding: 0; list-style: none; }
.pied-impra-colonne li a { display: inline-flex; align-items: center; min-height: 32px; font-size: 16px; line-height: 22px; color: rgba(255, 255, 255, 0.88); transition: color 0.2s var(--s-ease-ui); }
.pied-impra-colonne li a:hover { color: var(--s-bleu-encre); }
.pied-impra-bas {
  margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px;
  font-size: 14px; line-height: 24px; color: rgba(255, 255, 255, 0.6);
}
.pied-impra-bas nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.pied-impra-bas a { display: inline-flex; align-items: center; transition: color 0.2s var(--s-ease-ui); }
.pied-impra-bas a:hover { color: #FFFFFF; }
.pied-impra :focus-visible { outline-color: var(--s-bleu-encre); }
@media (max-width: 1023px) {
  .pied-impra-haut { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pied-impra-marque { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .pied-impra > .s-cadre { width: 100%; padding: 48px 5vw calc(48px + env(safe-area-inset-bottom, 0px)); }
  .pied-impra-marque .logo-impra { height: 32px; }
  .pied-impra-haut { grid-template-columns: 1fr 1fr; gap: 32px 16px; }
  .pied-impra-colonne li a, .pied-impra-bas nav a { min-height: 44px; }
  .pied-impra-bas { flex-direction: column; align-items: flex-start; }
}

/* ── 11 · Captures du produit ───────────────────────────────────────────────
   Des PNG du vrai navigateur sur le vrai code : jamais redessinées. Le cadre
   est celui de la fenêtre du hero de l'accueil, sans chrome de navigateur. */
.s-capture {
  position: relative; overflow: hidden; border-radius: 14px; background: #FBFCFE;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08), 0 30px 60px -30px rgba(0, 0, 0, 0.3);
}
.s-capture img { width: 100%; height: auto; }
.s-telephone {
  position: relative; overflow: hidden; border-radius: 34px; background: #0B1222;
  padding: 7px; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.45);
}
.s-telephone img { border-radius: 28px; width: 100%; height: auto; }

/* ── 12 · Apparition ────────────────────────────────────────────────────────
   Le contenu est visible par défaut. site.impra.js pose .s-anime sur <html>
   puis révèle chaque bloc en entrant dans l'écran : titre, texte, image, à
   70 ms d'écart. Sans script ou en mouvement réduit, rien ne bouge. */
@media (prefers-reduced-motion: no-preference) {
  .s-anime [data-s-apparition] { opacity: 0; transform: translateY(22px); }
  .s-anime [data-s-apparition].is-visible {
    opacity: 1; transform: none;
    transition: opacity 0.7s var(--s-ease), transform 0.9s var(--s-ease);
    transition-delay: calc(var(--s-i, 0) * 70ms);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ── 13 · La grammaire de l'accueil (26/10/2026) ───────────────────────────
   Les pages du site se construisent comme l'accueil, avec ses pièces,
   relevées au pixel sur la homepage (css/refonte.impra.css et
   css/produit.impra.css, couche v8) et tenues par tests/parite-accueil.mjs :
     · le hero : champ blanc (dégradé ardoise et rayures à 40 %, voile blanc
       en haut), pastille, titre en Inter 600, phrase ;
     · la tête de section : surtitre bleu en capitales, titre de 44 px,
       chapeau de 18 px ;
     · les sections « papier » (#F5F7FB) et « encre » (#0F172E), au rythme
       de l'accueil (89 px à 1 440 px) ;
     · les cartes blanches à filet, les cartes navy à liseré intérieur ;
     · la fenêtre produit (barre à trois points) et le téléphone du hero.
   L'accueil reste la référence : ces règles le copient, jamais l'inverse. */
:root {
  --s-hero-police: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --s-hero-encre: #1A1B1E;
  --s-hero-phrase: #667080;
  --s-papier: #F5F7FB;
  --s-section: clamp(64px, 6.2vw, 112px);
  --s-ombre-fenetre: 0 0 0 1px rgba(15, 23, 46, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(11, 13, 24, 0.04), 0 12px 24px -14px rgba(11, 13, 24, 0.12), 0 48px 96px -40px rgba(11, 13, 24, 0.28), 0 100px 140px -70px rgba(29, 107, 213, 0.22);
}

/* Le hero : le champ de l'accueil (.ha-fond), son contenu centré. Le champ
   est collant, haut d'un écran sous l'en-tête : le dégradé des bleus IMPRA
   et les rayures, chacun à 40 %, sous le masque blanc radial de l'accueil
   (.ha-masque à l'échelle 1, ramené à la taille du champ). Il ne se découvre
   qu'en bas de l'écran, derrière ce qui y passe. */
.s-hero { position: relative; isolation: isolate; overflow: clip; background: #FFFFFF; }
.s-hero__fond { position: absolute; inset: 0; z-index: -1; pointer-events: none; display: grid; }
/* Le bas du hero se fond dans le blanc de la section suivante, au lieu d'une ligne nette au défilement (28/10/2026). */
.s-hero__fond { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 140px), transparent); }
.s-hero__fond::before, .s-hero__fond::after {
  content: ""; grid-area: 1 / 1; align-self: start;
  position: sticky; top: var(--entete-h, 80px); height: calc(100svh - var(--entete-h, 80px));
}
.s-hero__fond::before {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.312) 0 1px, rgba(255, 255, 255, 0) 1px 8px),
    radial-gradient(90% 80% at 50% 100%, rgba(233, 242, 254, 0.4) 0%, rgba(187, 214, 250, 0.4) 45%, rgba(111, 167, 240, 0.4) 100%);
}
.s-hero__fond::after { background: radial-gradient(280% 160% at 50% 0%, #FFFFFF 32%, rgba(255, 255, 255, 0) 64%); }
.s-hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; }
.s-pastille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 7px 5px 11px; border: 1px solid #EEEFF1; border-radius: 13px; background: #FFFFFF;
  font-family: var(--s-hero-police); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: -0.01em; color: #232529;
  transition: background-color 0.2s ease;
}
.s-pastille svg { width: 12px; height: 12px; flex: none; color: #6F7988; transition: transform 0.2s ease; }
a.s-pastille:hover { background: #F7F8F9; }
a.s-pastille:hover svg { transform: translateX(2px); }
.s-hero__titre {
  margin-top: 36px; max-width: 14.2em; color: var(--s-hero-encre);
  font-family: var(--s-hero-police); font-optical-sizing: auto; font-variation-settings: "opsz" 32;
  font-feature-settings: "ss03", "calt";
  font-size: clamp(40px, 2vw + 35.2px, 80px); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em;
  text-wrap: balance;
}
.s-hero__phrase {
  margin-top: 36px; max-width: 640px; color: var(--s-hero-phrase);
  font-family: var(--s-hero-police); font-size: 18px; line-height: 1.3; font-weight: 500; letter-spacing: -0.01em;
  text-wrap: balance;
}
@media (max-width: 767px) {
  .s-hero__titre { margin-top: 28px; max-width: 10.5em; font-size: clamp(30px, 9.7vw, 44px); line-height: 1.02; letter-spacing: -0.022em; }
  .s-hero__phrase { margin-top: 20px; max-width: 24em; font-size: 16px; line-height: 1.5; }
}

/* La tête de section : surtitre, titre, chapeau. */
.s-surtitre {
  margin: 0 0 14px; font-size: 13px; line-height: 18px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--s-lien);
}
.s-tete { display: grid; justify-items: start; max-width: 960px; }
/* Les paliers de l'accueil : 44 / 52 px à partir de 1 280 px, 38 / 46 px en
   tablette, 8,6 vw (36 px au plus) au téléphone. */
.s-tete .s-h2 { font-size: 44px; line-height: 52px; letter-spacing: -0.022em; }
@media (max-width: 1279px) { .s-tete .s-h2 { font-size: 38px; line-height: 46px; } }
.s-tete__intro { margin-top: 16px; max-width: 44em; font-size: 18px; line-height: 28px; letter-spacing: -0.008em; color: var(--s-doux); text-wrap: pretty; }
.s-tete--centre { justify-items: center; margin-inline: auto; text-align: center; }
.s-tete--centre .s-tete__intro { text-wrap: balance; }
.s-accent { color: var(--s-bleu); }
@media (max-width: 767px) {
  .s-tete .s-h2 { font-size: min(8.6vw, 36px); line-height: 1.12; letter-spacing: -0.02em; }
  .s-tete__intro { font-size: 16px; line-height: 24px; }
}

/* Les sections : papier, encre ; le rythme de l'accueil. */
.s-bloc { padding-block: var(--s-section); }
.s-section--papier { background: var(--s-papier); }
.s-section--encre { background: var(--s-encre); color: var(--s-sur-encre); }
.s-section--encre .s-surtitre { color: var(--s-bleu-encre); }
.s-section--encre .s-h2 { color: #FFFFFF; }
.s-section--encre .s-tete__intro { color: var(--s-sur-encre-doux); }
.s-section--encre .s-accent { color: var(--s-bleu-encre); }
.s-section--encre :focus-visible { outline-color: var(--s-bleu-encre); }

/* Les cartes : blanche à filet, navy à liseré intérieur. */
.s-carte { background: #FFFFFF; border: 1px solid var(--s-trait); border-radius: var(--s-r-carte); }
.s-carte--encre {
  border: 0; border-radius: 22px; color: var(--s-sur-encre);
  background: linear-gradient(180deg, #16223E 0%, #131E37 100%);
  box-shadow: inset 0 0 0 1px rgba(124, 158, 226, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 24px 48px -40px rgba(0, 0, 0, 0.7);
}

@media (max-width: 767px) { .s-carte--encre { border-radius: 20px; } }

/* La fenêtre produit : celle du hero de l'accueil, barre à trois points. */
.s-fenetre {
  position: relative; overflow: hidden; border-radius: 18px; padding: 0 6px 6px;
  background: linear-gradient(180deg, #FBFCFE 0%, #F1F4F9 100%);
  box-shadow: var(--s-ombre-fenetre);
}
.s-fenetre__barre { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; }
.s-fenetre__barre span { width: 10px; height: 10px; border-radius: 50%; background: #FF5F57; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }
.s-fenetre__barre span:nth-child(2) { background: #FEBC2E; }
.s-fenetre__barre span:nth-child(3) { background: #28C840; }
.s-fenetre__ecran { overflow: hidden; border-radius: 12px; border: 1px solid rgba(15, 23, 46, 0.07); background: #FFFFFF; }
.s-fenetre__ecran img { width: 100%; height: auto; }
@media (max-width: 767px) {
  .s-fenetre { border-radius: 14px; padding: 0 6px 6px; background: linear-gradient(180deg, #F8FAFD 0%, #EFF3F8 100%); }
  .s-fenetre__barre { height: 24px; gap: 5px; padding: 0 8px; }
  .s-fenetre__barre span { width: 7px; height: 7px; background: #D9DBDF; }
  .s-fenetre__barre span:nth-child(2), .s-fenetre__barre span:nth-child(3) { background: #D9DBDF; }
  .s-fenetre__ecran { border-radius: 9px; }
}
/* Le téléphone du hero : cadre noir, îlot, écran au rapport de la capture. */
.s-tel { --tel-w: 240px; position: relative; width: var(--tel-w); }
.s-tel__cadre {
  position: relative; padding: calc(var(--tel-w) * 0.03); border-radius: calc(var(--tel-w) * 0.185); background: #0B0F1A;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), 0 0 0 1px rgba(11, 13, 24, 0.06), 0 2px 4px rgba(11, 13, 24, 0.18), 0 28px 56px -22px rgba(11, 13, 24, 0.6);
}
.s-tel__ecran { position: relative; overflow: hidden; border-radius: calc(var(--tel-w) * 0.155); background: #F5F7FB; }
.s-tel__ilot { position: absolute; z-index: 1; left: 50%; top: calc(var(--tel-w) * 0.03); width: calc(var(--tel-w) * 0.3); height: calc(var(--tel-w) * 0.082); border-radius: 999px; background: #0B0F1A; transform: translateX(-50%); }
.s-tel__ecran img { width: 100%; height: auto; }

/* Le lien à flèche de l'accueil (« Obtenir une réponse → »). */
.s-lien-fleche { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--s-encre); }
.s-lien-fleche svg { width: 16px; height: 16px; flex: none; transition: transform 0.25s var(--s-ease); }
.s-lien-fleche:hover { color: var(--s-lien); }
.s-lien-fleche:hover svg { transform: translateX(3px); }
.s-section--encre .s-lien-fleche { color: var(--s-sur-encre); }
.s-section--encre .s-lien-fleche:hover { color: #FFFFFF; }