/* ==========================================================================
   InfoPrime — feuille de style d'intégration
   Source de vérité : dossier d'intégration Divi/WordPress.
   Chassis papier/encre · une couleur signal · typo + données, sans imagerie.

   Ne pas réinventer de valeurs, ne pas substituer de couleurs, pas de
   dégradés ni d'ombres supplémentaires. Rayon 3px partout.
   ========================================================================== */

:root {
  --ip-papier: #F2F0EB;
  --ip-encre: #121417;
  --ip-surface: #FFFFFF;
  --ip-filet: #DEDAD1;
  --ip-filet-clair: #EAE7E0;
  --ip-bord-champ: #D5D1C8;
  --ip-bord-bouton: #C9C4B9;
  --ip-signal: #0C6B45;
  --ip-signal-survol: #084F33;
  --ip-signal-clair: #E4EFE9;
  --ip-signal-sombre: #7BC9A2;
  --ip-alerte: #A5301F;
  --ip-texte-2: #5A6068;
  --ip-texte-3: #6B7079;
  --ip-texte-4: #9AA0A8;
  --ip-sans: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
  --ip-mono: 'JetBrains Mono', ui-monospace, monospace;
  --ip-rayon: 3px;
  --ip-contenu: 1280px;
  --ip-gouttiere: 32px;
}

/* --- 3.1 Réinitialisation du chassis Divi ------------------------------- */

body,
body.et-tb-has-template,
#page-container,
#et-main-area {
  background: var(--ip-papier);
}

body,
body p,
body li,
.et_pb_text,
.et_pb_module {
  font-family: var(--ip-sans);
  color: var(--ip-encre);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}

body h1, body h2, body h3, body h4,
.et_pb_module h1, .et_pb_module h2, .et_pb_module h3, .et_pb_module h4 {
  font-family: var(--ip-sans);
  color: var(--ip-encre);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  padding-bottom: 0;
  text-wrap: pretty;
}

body a { color: var(--ip-signal); text-decoration: none; }
body a:hover { color: var(--ip-signal-survol); text-decoration: underline; }

.et_pb_section { padding: 0; background: transparent; }
.et_pb_row {
  width: 100%;
  max-width: var(--ip-contenu);
  padding: 0 var(--ip-gouttiere);
  margin: 0 auto;
}
.et_pb_column { margin-bottom: 0; }
.et_pb_row .et_pb_column.et-last-child { margin-bottom: 0; }
.et_pb_text_inner > *:last-child { margin-bottom: 0; }

/* --- 3.2 Rythme des sections ------------------------------------------- */

.ip-section        { padding: 80px 0 0; }
.ip-section--haut  { padding: 72px 0 64px; }
.ip-section--pied  { padding: 72px 0 96px; }
.ip-section--serre { padding: 44px 0 0; }

/* --- 3.3 Éléments typographiques réutilisables ------------------------- */

.ip-surtitre {
  font-family: var(--ip-mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ip-signal);
  margin: 0 0 20px;
}

.ip-titre-section {
  font-family: var(--ip-mono) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase;
  color: var(--ip-texte-3) !important;
  margin: 0 0 32px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ip-encre);
}

.ip-h1 {
  font-size: clamp(42px, 5.4vw, 78px) !important;
  font-weight: 700 !important;
  letter-spacing: -0.042em !important;
  line-height: 0.98 !important;
  margin: 0 0 26px;
  text-wrap: balance;
}
.ip-h1--interne { font-size: clamp(30px, 3.4vw, 46px) !important; letter-spacing: -0.038em !important; line-height: 1.04 !important; }
.ip-h1 .ip-chiffre, .ip-signal-txt { color: var(--ip-signal); }

.ip-chapeau { font-size: 19px; line-height: 1.5; color: #4A5057; max-width: 46ch; margin: 0 0 36px; }
.ip-note {
  font-family: var(--ip-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--ip-texte-4);
  line-height: 1.7;
  margin: 14px 0 0;
}
.ip-note--centre { text-align: center; }

/* --- 3.4 Boutons -------------------------------------------------------- */

.ip-btn,
.et_pb_button.ip-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ip-sans);
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1;
  padding: 17px 26px;
  border-radius: var(--ip-rayon);
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ip-btn:after, .et_pb_button.ip-btn:after { display: none !important; content: none !important; }

.ip-btn--principal, .et_pb_button.ip-btn--principal {
  background: var(--ip-signal);
  color: #fff !important;
  border: 0 !important;
}
.ip-btn--principal:hover {
  background: var(--ip-signal-survol);
  color: #fff !important;
  text-decoration: none;
}
.et_pb_button.ip-btn--principal:hover { padding: 17px 26px !important; }

.ip-btn--secondaire, .et_pb_button.ip-btn--secondaire {
  background: transparent;
  color: var(--ip-encre) !important;
  border: 1px solid var(--ip-bord-bouton) !important;
}
.ip-btn--secondaire:hover {
  background: var(--ip-surface);
  text-decoration: none;
}
/* Le padding force ne concerne QUE les boutons Divi : lui seul les
   redimensionne au survol. Applique a tous, il ecrasait le padding
   compact des boutons de tableau, qui changeaient donc de taille. */
.et_pb_button.ip-btn--secondaire:hover { padding: 17px 26px !important; }

.ip-btn--clair, .et_pb_button.ip-btn--clair {
  background: var(--ip-papier);
  color: var(--ip-encre) !important;
  border: 0 !important;
}
.ip-btn--clair:hover { background: #fff; }

.ip-btn--bloc { width: 100%; }
.ip-btn--compact { font-size: 14.5px; padding: 11px 18px; }

.ip-retour {
  display: inline-block;
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 26px;
  font-family: var(--ip-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ip-texte-3) !important;
}
.ip-retour:hover { color: var(--ip-encre) !important; text-decoration: none; }

/* --- 3.5 En-tête -------------------------------------------------------- */

.ip-entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(242, 240, 235, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ip-filet);
}
.ip-entete__interieur {
  max-width: var(--ip-contenu);
  margin: 0 auto;
  padding: 0 var(--ip-gouttiere);
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
/*
 * align-items: baseline — les barres reposent sur la ligne de base du
 * texte, comme les lettres. Avec center elles flottaient sous le mot :
 * un signe de 15px centre sur une ligne de 20px descend de 2.5px, ce qui
 * se voit immediatement a cote d'une capitale.
 */
/*
 * inline-flex, pas flex.
 *
 * .ip-logo est un enfant direct de .ip-entete__interieur, lui-meme en
 * flex : le passer en `display: flex; align-items: baseline` faisait
 * remonter la ligne de base du logo au niveau du conteneur, et TOUTE la
 * barre — menu, telephone, langues, bouton — s'alignait dessus au lieu
 * d'etre centree verticalement.
 *
 * inline-flex garde l'alignement baseline A L'INTERIEUR du logo sans
 * l'exporter au parent, qui continue de centrer ses enfants.
 */
.ip-logo {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  align-self: center;
}
/*
 * MARQUE — trois barres decroissantes.
 *
 * Le signe raconte ce que fait le site : des primes triees du plus cher
 * au moins cher, la derniere en plein vert etant l'offre retenue. Les
 * deux premieres sont attenuees pour que le regard aille a la bonne.
 *
 * Dessine en SVG plutot qu'en CSS : le trace reste net a toutes les
 * tailles, du favicon a l'impression, et les proportions ne dependent
 * pas du rendu des bordures.
 */
.ip-logo__marque {
  display: block;
  flex: none;
  width: 19px;
  height: 15px;   /* hauteur des capitales d'Archivo a 20px de corps */
  background: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 15'%3E%3Crect x='0' y='0' width='5' height='15' fill='%230C6B45' opacity='0.28'/%3E%3Crect x='7' y='5' width='5' height='10' fill='%230C6B45' opacity='0.55'/%3E%3Crect x='14' y='9' width='5' height='6' fill='%230C6B45'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/*
 * Sur fond sombre : les deux barres attenuees passent en creme, la barre
 * pleine en vert clair — le vert forest serait illisible sur l'encre.
 */
.ip-pied .ip-logo__marque,
.ip-pied__marque .ip-logo__marque {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 15'%3E%3Crect x='0' y='0' width='5' height='15' fill='%23F2F0EB' opacity='0.32'/%3E%3Crect x='7' y='5' width='5' height='10' fill='%23F2F0EB' opacity='0.6'/%3E%3Crect x='14' y='9' width='5' height='6' fill='%237BC9A2'/%3E%3C/svg%3E");
}

/* Le mot de la marque et la mention de l'exercice — emportes par un
   remplacement precedent, retablis ici. */
.ip-logo__mot {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--ip-encre);
}

.ip-logo__exercice {
  font-family: var(--ip-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
  border-left: 1px solid var(--ip-filet);
  padding-left: 12px;

  /*
   * align-self: center la decalait : le conteneur est passe en baseline
   * pour poser les barres sur la ligne du texte, et cette mention en
   * 10px centree sur une ligne de 19px remontait de plusieurs pixels.
   * Elle suit desormais la meme ligne de base que le reste.
   *
   * Le filet separateur, lui, doit couvrir toute la hauteur du logo :
   * cale sur la ligne de base il ne ferait que 10px. On le decale vers
   * le haut pour qu'il retrouve l'aplomb du mot.
   */
  align-self: baseline;
  line-height: 1;
  border-left-width: 1px;
  padding-block: 2px 1px;
}

.ip-pied .ip-logo__mot { color: var(--ip-papier); }

/*
 * Regle de base de la navigation — perdue lors d'un remplacement
 * precedent qui a emporte les lignes voisines. Sans elle, les liens, le
 * telephone, les langues et le bouton s'empilaient au lieu de s'aligner
 * horizontalement.
 */
.ip-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.ip-nav a { font-size: 14.5px; font-weight: 500; color: var(--ip-encre) !important; }
.ip-nav a:hover { text-decoration: none; color: var(--ip-signal) !important; }

/* Le bouton d'action fait partie de .ip-nav : la regle ci-dessus lui
   appliquait l'encre, puis le vert au survol — texte vert sur fond vert.
   Il garde son texte blanc dans tous les etats. */
.ip-nav a.ip-btn--principal,
.ip-nav a.ip-btn--principal:hover,
.ip-nav a.ip-btn--principal:visited,
.ip-nav a.ip-btn--principal:focus { color: #fff !important; }

/*
 * Menu mobile — declare ICI et non dans infoprime-tunnel.css, qui est
 * charge avant : la regle ci-dessus (display: flex) y ecrasait le
 * display: none, et le menu restait ouvert en permanence.
 */
@media (max-width: 980px) {
  .ip-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 20px;
    padding: 28px var(--ip-gouttiere);
    background: var(--ip-papier);
    border-bottom: 1px solid var(--ip-filet);
  }
  .ip-nav.ip-nav--ouvert { display: flex; }
  .ip-nav a { font-size: 17px; display: block; }
  .ip-nav .ip-btn { justify-content: center; }
}
.ip-tel { font-family: var(--ip-mono); font-size: 12.5px; color: #3A4048; letter-spacing: 0.02em; }
.ip-langues { display: flex; gap: 2px; border: 1px solid var(--ip-filet); padding: 3px; font-family: var(--ip-mono); font-size: 11px; letter-spacing: 0.1em; }
.ip-langues a { padding: 2px 6px; color: var(--ip-texte-3) !important; }
.ip-langues a.actif { background: var(--ip-encre); color: var(--ip-papier) !important; }

/* --- 3.6 Cartes et grilles --------------------------------------------- */

.ip-carte {
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-radius: var(--ip-rayon);
  padding: 32px;
}
.ip-carte--accent { border-top: 3px solid var(--ip-signal); box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 12px 32px rgba(18,20,23,.06); }
.ip-carte--large { padding: 36px; }

.ip-duo {
  display: grid;
  gap: 56px;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  align-items: start;
}
.ip-duo--formulaire { gap: 48px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.ip-trio { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ip-colle { position: sticky; top: 104px; }

.ip-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ip-encre); }
.ip-stats > div { padding: 16px 20px 0 0; border-right: 1px solid var(--ip-filet); }
.ip-stats > div + div { padding-left: 20px; }
.ip-stats > div:last-child { border-right: 0; padding-right: 0; }
.ip-stats__valeur { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ip-stats__libelle {
  font-family: var(--ip-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
  margin-top: 4px;
}

.ip-argument__num { font-family: var(--ip-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ip-signal); margin-bottom: 14px; }
.ip-argument h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 10px; line-height: 1.25; }
.ip-argument p { margin: 0; font-size: 15.5px; color: var(--ip-texte-2); line-height: 1.6; }

/* --- 3.7 Bandeaux sombres ---------------------------------------------- */

.ip-bandeau { background: var(--ip-encre); color: var(--ip-papier); }
.ip-bandeau__interieur {
  max-width: var(--ip-contenu);
  margin: 0 auto;
  padding: 26px var(--ip-gouttiere);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  align-items: baseline;
  font-family: var(--ip-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #9BA3AC;
}
.ip-bandeau__interieur strong, .ip-bandeau__interieur .ip-fort { color: var(--ip-papier); font-weight: 400; }

.ip-appel {
  background: var(--ip-encre);
  color: var(--ip-papier);
  border-radius: var(--ip-rayon);
  padding: 44px 48px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.ip-appel h2 { font-size: 34px; font-weight: 600; letter-spacing: -0.032em; line-height: 1.15; margin: 0 0 10px; color: var(--ip-papier) !important; }
.ip-appel p { margin: 0; font-size: 16.5px; color: #A8AEB6; }
.ip-appel .ip-surtitre { color: var(--ip-signal-sombre); }

.ip-recap { background: var(--ip-encre); color: var(--ip-papier); border-radius: var(--ip-rayon); padding: 30px; }
.ip-recap__titre { font-family: var(--ip-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ip-signal-sombre); margin: 0 0 20px; }
.ip-recap dl { margin: 0; }
.ip-recap__ligne {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-top: 1px solid rgba(242,240,235,.14);
}
.ip-recap__ligne:last-of-type { border-bottom: 1px solid rgba(242,240,235,.14); }
.ip-recap dt { color: #9BA3AC; font-size: 14px; }
.ip-recap dd { margin: 0; font-size: 14.5px; font-weight: 500; text-align: right; }
.ip-recap__eco { margin-top: 22px; }
.ip-recap__eco-libelle { font-family: var(--ip-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-signal-sombre); margin-bottom: 6px; }
.ip-recap__eco-valeur { font-size: 40px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.ip-recap__eco-note { font-size: 14px; color: #9BA3AC; margin-top: 4px; }

/* --- 3.8 Champs de formulaire ------------------------------------------ */

.ip-champ { display: block; margin-bottom: 20px; }
.ip-champ__label, .ip-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.01em; margin-bottom: 7px; color: var(--ip-encre); }

.ip-input,
.ip-select,
.ip-formulaire input[type="text"],
.ip-formulaire input[type="tel"],
.ip-formulaire input[type="email"],
.ip-formulaire input[type="number"],
.ip-formulaire select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-family: var(--ip-sans);
  font-size: 16px;
  color: var(--ip-encre);
  background: var(--ip-surface);
  border: 1px solid var(--ip-bord-champ);
  border-radius: var(--ip-rayon);
  appearance: none;
  box-shadow: none;
}
.ip-input--grand { height: 50px; }
.ip-input::placeholder { color: var(--ip-texte-4); opacity: 1; }
.ip-input:focus-visible, .ip-select:focus-visible, .ip-btn:focus-visible, .ip-puce:focus-visible {
  outline: 2px solid var(--ip-signal);
  outline-offset: 2px;
}
.ip-select {
  background-image: linear-gradient(45deg, transparent 50%, var(--ip-encre) 50%), linear-gradient(135deg, var(--ip-encre) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

.ip-grille-champs { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: 24px; }

.ip-groupe__titre {
  font-family: var(--ip-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
  margin: 0 0 22px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ip-encre);
}

.ip-puces { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.ip-puce {
  background: var(--ip-surface);
  color: #3A4048;
  border: 1px solid var(--ip-bord-champ);
  border-radius: var(--ip-rayon);
  padding: 10px 16px;
  font-family: var(--ip-sans);
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.ip-puce:hover { border-color: #A9A29A; }
.ip-puce[aria-pressed="true"], .ip-puce.actif {
  background: var(--ip-encre);
  color: var(--ip-papier);
  border-color: var(--ip-encre);
}
.ip-puce--petit { padding: 7px 11px; font-size: 13px; }

.ip-consentement {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14.5px;
  color: #4A5057;
  line-height: 1.5;
  cursor: pointer;
  margin-bottom: 30px;
}
.ip-consentement input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ip-signal); flex: none; }

/* --- 3.9 Graphique cantonal ------------------------------------------- */

.ip-cantons__entete {
  display: flex;
  align-items: center;
  font-family: var(--ip-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ip-texte-4);
  padding-bottom: 10px;
}
.ip-canton { display: flex; align-items: center; border-top: 1px solid var(--ip-filet); padding: 13px 0; }
.ip-canton:last-of-type { border-bottom: 1px solid var(--ip-filet); }
.ip-canton__nom { width: 150px; flex: none; font-size: 16px; font-weight: 500; }
.ip-canton__piste { flex: 1; position: relative; height: 10px; background: #E6E3DB; }
.ip-canton__plage { position: absolute; top: 0; bottom: 0; background: var(--ip-encre); }
.ip-canton--vous .ip-canton__plage { background: var(--ip-signal); }
.ip-canton__ecart { width: 130px; flex: none; text-align: right; font-size: 16px; font-weight: 600; color: var(--ip-signal); }

/* --- 3.10 FAQ (module Accordéon Divi) --------------------------------- */

.ip-faq .et_pb_toggle,
.ip-faq .et_pb_accordion_item {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--ip-filet) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-shadow: none !important;
}
.ip-faq .et_pb_toggle_title {
  font-family: var(--ip-sans) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em !important;
  color: var(--ip-encre) !important;
  padding: 22px 40px 22px 0 !important;
  cursor: pointer;
}
.ip-faq .et_pb_toggle_content {
  padding: 0 0 24px !important;
  font-size: 16px;
  color: var(--ip-texte-2);
  line-height: 1.65;
  max-width: 74ch;
}
.ip-faq .et_pb_toggle_content strong { color: var(--ip-encre); }
.ip-faq .et_pb_toggle_title:before {
  content: '+';
  font-family: var(--ip-mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--ip-texte-3);
  right: 0;
  top: 22px;
  transform: none;
}
.ip-faq .et_pb_toggle_open .et_pb_toggle_title:before { content: '–'; }

/* Accordéon natif <details>, hors module Divi */
.ip-faq details { border-bottom: 1px solid var(--ip-filet); }
.ip-faq details > summary {
  list-style: none;
  cursor: pointer;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  padding: 22px 40px 22px 0;
  position: relative;
}
.ip-faq details > summary::-webkit-details-marker { display: none; }
.ip-faq details > summary::after {
  content: '+';
  position: absolute;
  right: 0;
  top: 22px;
  font-family: var(--ip-mono);
  font-size: 20px;
  font-weight: 400;
  color: var(--ip-texte-3);
}
.ip-faq details[open] > summary::after { content: '–'; }
.ip-faq details p { padding: 0 0 24px; margin: 0; font-size: 16px; color: var(--ip-texte-2); line-height: 1.65; max-width: 74ch; }

/* --- 3.11 Résultats : cartes d'offres --------------------------------- */

.ip-offres { display: grid; gap: 14px; }
.ip-offre {
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-radius: var(--ip-rayon);
  padding: 24px 26px;
}
.ip-offre--meilleure { border-color: var(--ip-encre); border-left: 3px solid var(--ip-signal); }
.ip-offre__haut { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; justify-content: space-between; }
.ip-offre__fanion {
  display: none;
  font-family: var(--ip-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ip-signal);
  background: var(--ip-signal-clair);
  padding: 4px 8px;
  margin-bottom: 10px;
}
.ip-offre--meilleure .ip-offre__fanion { display: inline-block; }
.ip-offre h3 { font-size: 23px; font-weight: 600; letter-spacing: -0.028em; margin: 0 0 3px; }
.ip-offre__detail { margin: 0; font-size: 14px; color: var(--ip-texte-3); }
.ip-offre__chiffres { display: flex; gap: 40px; align-items: flex-end; }

/*
 * Un nom de modele long — « Hausarztversicherung Profit » — etirait la
 * ligne de detail sur toute la largeur avant de passer a la ligne. Le
 * bloc de gauche gagnait en hauteur et poussait les chiffres vers le
 * bas, ou align-items:flex-end les recentrait au milieu de la carte.
 *
 * Deux corrections : on borne la ligne de detail a deux lignes, et on
 * aligne les chiffres sur le HAUT de la carte plutot que sur le bas du
 * texte — ainsi leur position ne depend plus du nom du modele.
 *
 * Regles placees ICI et non dans infoprime-tunnel.css, qui est charge
 * AVANT : la declaration ci-dessus les y aurait ecrasees.
 */
/*
 * La ligne de detail tient sur UNE seule ligne, comme sur les cartes aux
 * noms courts. Les noms longs — « Hausarztversicherung Profit » — sont
 * tronques par des points de suspension plutot que de passer a la ligne :
 * le nom complet reste lisible au survol, et surtout la hauteur de la
 * carte ne varie plus d'une offre a l'autre.
 *
 * min-width:0 est indispensable : sans lui, un element flex refuse de
 * retrecir en dessous de la largeur de son contenu, et text-overflow
 * n'a aucun effet.
 */
.ip-offre__haut > div:first-child { min-width: 0; }

.ip-offre__detail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.45;
}

/* Les chiffres s'alignent sur le haut : leur position ne depend plus de
   la hauteur du bloc de texte. */
.ip-offre__haut { align-items: flex-start; }
.ip-offre__chiffres { align-items: flex-start; }
.ip-offre__chiffres .ip-btn { margin-top: 14px; }

@media (max-width: 900px) {
  /* Sur mobile la carte s'empile : le texte peut alors revenir a la
     ligne, il n'y a plus de colonne de chiffres a decaler. */
  .ip-offre__detail { white-space: normal; overflow: visible; }
  .ip-offre__chiffres .ip-btn { margin-top: 0; }
}
.ip-offre__libelle { font-family: var(--ip-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ip-texte-3); margin-bottom: 4px; }
.ip-offre__prime { font-size: 32px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.ip-offre__eco { font-size: 32px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ip-signal); }
.ip-offre__eco--negatif { color: var(--ip-alerte); }
.ip-jauge { height: 5px; background: #E6E3DB; margin-top: 20px; }
.ip-jauge > span { display: block; height: 100%; background: var(--ip-signal); transition: width 0.45s cubic-bezier(.2,.8,.2,1); }
.ip-jauge--negatif > span { background: var(--ip-alerte); }

/* --- 3.12 Résultats : tableau ----------------------------------------- */

.ip-tableau-cadre {
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-radius: var(--ip-rayon);
  overflow-x: auto;
}
.ip-tableau { width: 100%; min-width: 790px; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; }
.ip-tableau th {
  text-align: left;
  padding: 14px 18px;
  font-family: var(--ip-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
  border-bottom: 1px solid var(--ip-encre);
  background: var(--ip-surface);
}
.ip-tableau th.ip-droite, .ip-tableau td.ip-droite { text-align: right; }
.ip-tableau th.ip-col-ecart { width: 170px; white-space: nowrap; }
.ip-tableau td { padding: 15px 18px; border-top: 1px solid var(--ip-filet-clair); font-size: 14.5px; color: var(--ip-texte-2); }
.ip-tableau td.ip-caisse { font-size: 16px; font-weight: 600; color: var(--ip-encre); }
.ip-tableau td.ip-prime { font-size: 18px; font-weight: 600; color: var(--ip-encre); letter-spacing: -0.02em; text-align: right; white-space: nowrap; }
.ip-tableau td.ip-ecart { font-size: 17px; font-weight: 600; text-align: right; white-space: nowrap; color: var(--ip-signal); }
.ip-tableau td.ip-ecart--negatif { color: var(--ip-alerte); }
.ip-tableau td.ip-ecart .ip-jauge { width: 104px; height: 4px; margin: 7px 0 0 auto; }
.ip-tableau tr.ip-ligne--meilleure { background: #FBFAF7; }
.ip-tableau .ip-btn--secondaire { padding: 8px 14px; font-size: 13.5px; }

/* --- 3.13 Barre d'économie fixe --------------------------------------- */

.ip-barre-fixe {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  background: var(--ip-encre);
  color: var(--ip-papier);
  border-top: 1px solid rgba(242,240,235,.14);
}
.ip-barre-fixe__interieur {
  max-width: var(--ip-contenu);
  margin: 0 auto;
  padding: 16px var(--ip-gouttiere);
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: space-between;
}
.ip-barre-fixe__lots { display: flex; flex-wrap: wrap; gap: 36px; align-items: baseline; }
.ip-barre-fixe__libelle { display: block; font-family: var(--ip-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8B939C; }
.ip-barre-fixe__valeur { font-size: 17px; font-weight: 600; }
.ip-barre-fixe__valeur--eco { color: var(--ip-signal-sombre); font-weight: 700; }
.ip-barre-fixe .ip-barre-fixe__libelle--eco { color: var(--ip-signal-sombre); }
.ip-page-primes .ip-section--pied { padding-bottom: 140px; }

/* --- 3.14 Confirmation ------------------------------------------------- */

.ip-pastille {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ip-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ip-signal);
  background: var(--ip-signal-clair);
  border-radius: 999px;
  padding: 7px 14px;
  margin-bottom: 26px;
}
.ip-pastille:before { content: ''; width: 7px; height: 7px; background: var(--ip-signal); border-radius: 999px; display: block; }
.ip-reference { font-family: var(--ip-mono); font-size: 17px; color: var(--ip-encre); font-weight: 500; }

.ip-etapes { list-style: none; margin: 0; padding: 0; }
.ip-etapes li { display: flex; gap: 20px; padding-bottom: 28px; }
.ip-etapes li:last-child { padding-bottom: 0; }
.ip-etapes__num {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: var(--ip-encre);
  color: var(--ip-papier);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ip-mono); font-size: 13px;
}
.ip-etapes li:last-child .ip-etapes__num { background: var(--ip-signal); color: #fff; }
.ip-etapes h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.ip-etapes p { margin: 0; font-size: 15.5px; color: var(--ip-texte-2); line-height: 1.6; }

/* --- 3.15 Pied de page ------------------------------------------------- */

.ip-pied { background: var(--ip-encre); color: #9BA3AC; }
.ip-pied__grille {
  max-width: var(--ip-contenu);
  margin: 0 auto;
  padding: 56px var(--ip-gouttiere) 40px;
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ip-pied p { margin: 0; font-size: 14.5px; line-height: 1.6; max-width: 34ch; color: #9BA3AC; }
.ip-pied__titre { font-family: var(--ip-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ip-papier); margin-bottom: 14px; }
.ip-pied__liens { display: flex; flex-direction: column; gap: 9px; font-size: 14.5px; }
.ip-pied a { color: #9BA3AC !important; }
.ip-pied a:hover { color: var(--ip-papier) !important; text-decoration: none; }
.ip-pied__tel { font-family: var(--ip-mono); font-size: 14px; color: var(--ip-papier); margin-bottom: 6px; }
.ip-pied__bas {
  max-width: var(--ip-contenu);
  margin: 0 auto;
  padding: 20px var(--ip-gouttiere) 40px;
}
.ip-pied__bas p {
  border-top: 1px solid rgba(242,240,235,.14);
  padding-top: 20px;
  margin: 0;
  max-width: none;
  font-family: var(--ip-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ip-texte-3);
}

/* --- 3.16 Adaptatif --------------------------------------------------- */

@media (max-width: 1100px) {
  .ip-colle { position: static; }
  .ip-resultats { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  /* nowrap et position:relative : le logo et le bouton du menu restent
     sur une ligne, et le menu deroulant se positionne par rapport a
     l'en-tete plutot qu'a un ancetre plus lointain. */
  .ip-entete__interieur {
    height: 70px;
    padding: 0 var(--ip-gouttiere);
    flex-wrap: nowrap;
    position: relative;
  }
  .ip-nav { gap: 18px; }
  /*
   * Le telephone et la mention d'exercice disparaissent — ils tiennent
   * dans le pied de page. Le selecteur de langue, lui, RESTE : sans lui
   * un visiteur germanophone n'a aucun moyen de changer de langue sur
   * mobile, ou se fait pourtant la majorite des visites.
   */
  .ip-tel, .ip-logo__exercice { display: none; }

  /* Dans le menu deroulant, le selecteur prend toute la largeur et se
     centre — il n'a plus a se tasser dans la barre. */
  .ip-nav .ip-langues {
    display: flex;
    justify-content: center;
    align-self: stretch;
    padding: 6px;
  }
  .ip-nav .ip-langues a { padding: 6px 14px; font-size: 13px; }
  .ip-appel { padding: 32px 28px; }
  .ip-appel h2 { font-size: 27px; }
}

@media (max-width: 780px) {
  :root { --ip-gouttiere: 20px; }

  /*
   * .ip-contenu porte la gouttiere de toutes les sections. Elle etait
   * declaree uniquement dans infoprime-tunnel.css, charge AVANT ce
   * fichier : sa valeur de --ip-gouttiere y etait donc calculee sur une
   * variable ensuite ecrasee. Resultat : du texte colle aux bords sur
   * mobile, sauf sur le comparateur qui porte son propre conteneur.
   *
   * On la redeclare ici, ou la variable fait autorite.
   */
  .ip-contenu,
  .ip-page {
    padding-inline: var(--ip-gouttiere);
  }

  /* Les bandeaux pleine largeur gardent leur contenu interieur borne. */
  .ip-bandeau__interieur,
  .ip-bandeau__contenu,
  .ip-pied__grille,
  .ip-pied__bas,
  .ip-entete__interieur,
  .ip-barre-fixe__interieur,
  .ip-barre-collante__contenu {
    padding-inline: var(--ip-gouttiere);
  }
  .ip-section, .ip-section--haut { padding-top: 48px; }
  .ip-section--haut { padding-bottom: 40px; }
  .ip-section--pied { padding-bottom: 64px; }
  .ip-duo, .ip-duo--formulaire { gap: 32px; grid-template-columns: 1fr; }
  .ip-trio { gap: 30px; }
  .ip-stats { grid-template-columns: 1fr; border-top: 0; }
  .ip-stats > div,
  .ip-stats > div + div { border-right: 0; border-top: 1px solid var(--ip-filet); padding: 14px 0 12px; }
  .ip-carte, .ip-carte--large { padding: 22px; }
  .ip-offre__haut { flex-direction: column; gap: 16px; }
  .ip-offre__chiffres { width: 100%; flex-wrap: wrap; gap: 20px 28px; }
  .ip-offre__chiffres .ip-btn { width: 100%; }
  .ip-canton__nom { width: 108px; font-size: 14.5px; }
  .ip-canton__ecart { width: 96px; font-size: 14.5px; }
  .ip-cantons__entete { font-size: 9.5px; }
  .ip-barre-fixe__lots { gap: 18px; }
  .ip-barre-fixe__interieur { gap: 12px; }
  .ip-barre-fixe .ip-btn { width: 100%; }
  .ip-page-primes .ip-section--pied { padding-bottom: 200px; }
  .ip-faq .et_pb_toggle_title { font-size: 17px !important; }
  .ip-faq details > summary { font-size: 17px; }
}

/* --- 3.17 Impression -------------------------------------------------- */

@media print {
  .ip-entete, .ip-barre-fixe, .ip-appel, .ip-btn { display: none !important; }
  body, #page-container { background: #fff; }
  .ip-carte, .ip-offre, .ip-tableau-cadre { border-color: #999; box-shadow: none; }
}

/* ==========================================================================
   MOBILE — corrections mesurées sur écran de 390px

   Chaque règle ci-dessous répond à un défaut constaté, pas à une
   précaution générale.
   ========================================================================== */

@media (max-width: 780px) {

  /*
   * TABLEAU DES CANTONS
   * 108px + 96px de colonnes fixes ne laissaient que ~150px à la barre
   * de mesure, largeur à laquelle elle ne mesure plus rien de lisible.
   * Le nom et l'écart passent donc sur une ligne, la barre en dessous —
   * elle retrouve toute la largeur.
   */
  .ip-canton {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 12px 0;
  }
  .ip-canton__nom { width: auto; font-size: 15px; }
  .ip-canton__ecart { width: auto; font-size: 15px; }
  .ip-canton__piste { grid-column: 1 / -1; height: 6px; }
  .ip-cantons__entete { display: none; }

  /*
   * CHIFFRES CLÉS
   * Les libellés en capitales espacées débordaient de leur colonne :
   * « ASSUREURS COMPARÉS » ne tient pas sur 390px à 10.5px avec 0.12em
   * d'espacement. L'espacement est réduit et le retour à la ligne permis.
   */
  .ip-stats__libelle,
  .ip-chiffres__label {
    letter-spacing: 0.06em;
    font-size: 9.5px;
    white-space: normal;
    line-height: 1.4;
  }

  /*
   * BANDEAU SOMBRE
   * Le texte en capitales espacées y est le plus long du site
   * (« ASSURANCE DE BASE LAMAL · PRESTATIONS IDENTIQUES PAR LA LOI »).
   * Sans réduction, il déborde ou impose un défilement horizontal.
   */
  .ip-bandeau__interieur,
  .ip-bandeau__contenu {
    font-size: 10px;
    letter-spacing: 0.06em;
    gap: 8px 16px;
  }

  /*
   * CARTE D'ENTRÉE
   * Elle touchait les bords de l'écran : son conteneur porte la gouttière,
   * mais la carte l'annulait par sa propre largeur.
   */
  .ip-carte--accent,
  .ip-carte--entree { margin-inline: 0; }

  /* Mentions sous le bouton : trois éléments séparés par des points
     médians qui se cassaient mal. */
  .ip-note--centre,
  .ip-heros__mention { font-size: 10px; letter-spacing: 0.03em; line-height: 1.6; }

  /*
   * ACCORDÉON
   * Le « + » chevauchait les questions longues, particulièrement en
   * allemand où elles sont plus étendues qu'en français.
   */
  .ip-faq details > summary,
  .ip-question > summary { padding-right: 32px; font-size: 16px; }

  /* Aucun mot ne doit dépasser sa colonne — les noms de modèles et
     certains composés allemands sont plus longs que le français. */
  .ip h1, .ip h2, .ip h3, .ip-argument h3, .ip-point h3 {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* Très petits écrans : le titre principal doit encore tenir. */
@media (max-width: 380px) {
  .ip-canton__nom, .ip-canton__ecart { font-size: 14px; }
  .ip-stats__valeur, .ip-chiffres__valeur { font-size: 24px; }
}

/* ==========================================================================
   LANGUES LONGUES — allemand et italien

   Mesure faite sur les libellés réels : l'allemand et l'italien sont
   jusqu'à 60 % plus longs que le français sur les textes courts.
   « Veränderung im Jahresvergleich » fait 30 caractères contre 19 pour
   « Variation sur un an ».

   Ces libellés sont rendus en capitales avec un espacement de 0.12em :
   à cette échelle, 11 caractères de plus suffisent à déborder d'une
   colonne étroite. Les règles ci-dessous s'appliquent à TOUTES les
   langues — un réglage calé sur le français seul se casserait ailleurs,
   et un sélecteur par langue serait fragile.
   ========================================================================== */

@media (max-width: 900px) {

  /* Les étiquettes mono ne sont jamais insécables. */
  .ip-stats__libelle,
  .ip-chiffres__label,
  .ip-offre__libelle,
  .ip-barre-fixe__libelle,
  .ip-etiquette,
  .ip-recap__titre {
    white-space: normal;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* En-têtes de tableau : mêmes contraintes. */
  .ip-tableau th,
  .ip-offres-table thead th {
    white-space: normal;
    letter-spacing: 0.06em;
  }

  /* Les composés allemands — « Krankenkassen-Prämienvergleich » — sont
     plus longs que n'importe quel mot français. */
  .ip-argument h3, .ip-point h3,
  .ip-offre h3, .ip-evolution__titre {
    overflow-wrap: break-word;
    hyphens: auto;
  }
}

/* La barre fixe porte trois libellés côte à côte : c'est l'endroit le
   plus contraint du site, et l'allemand y ajoute 6 caractères. */
@media (max-width: 600px) {
  .ip-barre-fixe__libelle,
  .ip-barre-collante__faits .ip-mono {
    font-size: 8.5px;
    letter-spacing: 0.05em;
  }
  .ip-barre-fixe__lots,
  .ip-barre-collante__faits { gap: 14px; }
}

/*
 * Écart nul : la personne détient déjà cette offre.
 *
 * Le tiret « — » n'expliquait rien : on ne savait pas si l'écart était
 * inconnu, nul ou non calculé. Un libellé le dit franchement, en gris
 * puisqu'il n'y a ni gain ni perte à signaler.
 */
.ip-offre__eco--nulle {
  font-size: 14px;
  font-weight: 500;
  color: var(--ip-texte-3);
  white-space: nowrap;
}

/* Les montants d'écart portent maintenant « CHF » et « / an » : ils sont
   plus longs qu'un simple nombre et ne doivent pas se couper. */
.ip-offre__eco { white-space: nowrap; }

@media (max-width: 900px) {
  .ip-offre__eco { font-size: 17px; }
  .ip-offre__eco--nulle { font-size: 13px; }
}

/*
 * Caisses indisponibles dans la région du visiteur.
 *
 * Grisées plutôt que retirées : quelqu'un qui ne trouve pas sa caisse
 * dans la liste conclurait qu'elle n'est pas comparée, ce qui est faux.
 * Le libellé explique la raison au lieu de laisser deviner.
 */
select option:disabled {
  color: #9AA0A8;
  font-style: italic;
}

/*
 * Boutons d'ajout et de retrait de personne.
 *
 * Le libellé et les deux boutons partageaient la même rangée flex : sur
 * écran étroit, le texte les poussait à la ligne l'un après l'autre, et
 * le « + » se retrouvait séparé du « − ». Groupés dans un conteneur qui
 * ne se coupe pas, ils restent toujours côte à côte.
 */
.ip-ajout-personnes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ip-ajout-personnes__boutons {
  display: inline-flex;
  gap: 8px;
  flex: none;
  white-space: nowrap;
}

@media (max-width: 480px) {
  /* Le libellé prend sa ligne, les boutons la suivante — mais ensemble. */
  .ip-ajout-personnes { gap: 10px; }
  .ip-ajout-personnes .ip-note { flex: 1 1 100%; }
}

/* ==========================================================================
   TABLEAU DES ÉCARTS PAR CANTON — graduations

   L'échelle était annoncée en toutes lettres au-dessus des barres
   (« CHF 50 → CHF 950 / mois ») : le lecteur devait estimer lui-même où
   tombait chaque montant. Des repères chiffrés rendent la lecture directe.
   ========================================================================== */

/* Conteneur du tableau : borne la largeur des graduations, qui sont
   positionnees en absolu par rapport a lui. */
.ip-cantons { position: relative; }

.ip-cantons__col-nom   { width: 150px; flex: none; }
.ip-cantons__col-piste { flex: 1; position: relative; }
.ip-cantons__col-ecart { width: 130px; flex: none; text-align: right; }

/* Traits verticaux dans chaque barre, alignés sur les graduations. */
.ip-canton__repere {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(0, 0, 0, 0.06);
  pointer-events: none;
}

/* Ligne de graduations, sous la dernière barre. */
.ip-cantons__echelle {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--ip-filet);
}
.ip-cantons__graduations { position: relative; height: 16px; }
.ip-cantons__graduation {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-family: var(--ip-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--ip-texte-4);
  white-space: nowrap;
}

@media (max-width: 780px) {
  /* Le nom et l'écart passent sur une ligne, la barre en dessous —
     déjà traité plus haut. Les graduations suivent la même logique. */
  .ip-cantons__echelle { display: block; padding-top: 6px; }
  .ip-cantons__col-nom, .ip-cantons__col-ecart { display: none; }
  .ip-cantons__graduation { font-size: 9.5px; }
}

/* ==========================================================================
   MONTANTS AUX EXTRÉMITÉS DES BARRES

   Le lecteur devait faire l'aller-retour vers la graduation du bas pour
   situer un canton. Les montants placés aux deux bouts du trait donnent
   la réponse sur place ; la graduation reste en bas pour la comparaison
   d'ensemble.
   ========================================================================== */

/*
 * La barre reste FINE — 10px, comme a l'origine.
 *
 * Une premiere version l'epaississait a 22px pour loger les montants a
 * l'interieur : le trait devenait lourd et perdait sa legerete. Les
 * montants sont donc places au-DESSUS de la barre, ce qui n'impose
 * aucune contrainte sur son epaisseur.
 */
.ip-canton { padding-block: 14px; }

/*
 * PAS de position: relative ici.
 *
 * La barre est deja en position: absolute (ligne 557) pour se placer
 * dans la piste selon son montant. Lui imposer relative annulait ce
 * positionnement : elle perdait ses coordonnees et disparaissait.
 *
 * absolute suffit d'ailleurs comme repere pour les montants enfants :
 * tout element positionne sert d'ancrage, pas seulement relative.
 */

.ip-canton__borne {
  position: absolute;
  bottom: 100%;
  margin-bottom: 3px;
  font-family: var(--ip-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
  color: var(--ip-texte-4);
  white-space: nowrap;
  pointer-events: none;
}

/* Alignes sur les extremites du trait, sans le recouvrir. */
.ip-canton__borne--debut { left: 0; }
.ip-canton__borne--fin   { right: 0; }

/* Sur la ligne du visiteur, les montants suivent l'accent vert. */
.ip-canton--vous .ip-canton__borne { color: var(--ip-signal); font-weight: 600; }

/* Les montants etant au-dessus du trait, la piste n'a plus besoin de
   marges laterales pour les accueillir. */

@media (max-width: 780px) {
  .ip-canton__borne { font-size: 9.5px; }
}

/* ==========================================================================
   ÉCART PHARE (accueil)

   Le tableau des 26 cantons occupait un écran entier sans renforcer
   l'argument : le visiteur venu comparer n'a pas besoin de connaître
   l'écart valaisan avant de saisir son code postal. L'accueil annonce
   le chiffre, la page Primes montre le détail.
   ========================================================================== */

.ip-ecart-phare {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
  align-items: flex-end;
  justify-content: space-between;
  padding: 32px 34px;
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-radius: var(--ip-rayon);
}
.ip-ecart-phare__chiffre {
  margin: 10px 0 12px;
  font-size: 54px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ip-signal);
}
.ip-ecart-phare__texte {
  margin: 0;
  max-width: 52ch;
  font-size: 15.5px;
  color: var(--ip-texte-2);
  line-height: 1.6;
}

@media (max-width: 780px) {
  .ip-ecart-phare { padding: 24px 22px; gap: 20px; }
  .ip-ecart-phare__chiffre { font-size: 40px; }
  .ip-ecart-phare .ip-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   PAGES ÉDITORIALES

   Deux colonnes : le sommaire à gauche, le texte à droite borné à 68
   caractères. Au-delà de cette mesure, l'œil perd la ligne en revenant
   à la marge — c'est la limite classique du texte courant.
   ========================================================================== */

.ip-article__tete { max-width: 760px; margin-bottom: 44px; }
.ip-article__tete .ip-surtitre { margin-bottom: 12px; }

.ip-article__duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
}
@media (min-width: 1000px) {
  .ip-article__duo { grid-template-columns: 220px minmax(0, 1fr); gap: 56px; }
}

/* --- Sommaire --- */

.ip-sommaire { align-self: start; }

@media (min-width: 1000px) {
  /* Il suit la lecture : sans cela, il disparaît dès le premier
     défilement, au moment précis où il devient utile. */
  .ip-sommaire { position: sticky; top: 96px; }
}

.ip-sommaire__titre {
  margin: 0 0 12px;
  font-family: var(--ip-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ip-encre);
}
.ip-sommaire nav { display: flex; flex-direction: column; }
.ip-sommaire a {
  padding: 7px 0;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ip-texte-2) !important;
  border-bottom: 1px solid var(--ip-filet-clair);
  text-decoration: none;
}
.ip-sommaire a:last-child { border-bottom: 0; }
.ip-sommaire a:hover { color: var(--ip-signal) !important; }

@media (max-width: 999px) {
  /* Replié en carte : sur un écran étroit, une liste de dix entrées
     repousserait le texte hors de vue. */
  .ip-sommaire {
    background: var(--ip-surface);
    border: 1px solid var(--ip-filet);
    border-radius: var(--ip-rayon);
    padding: 18px 20px;
  }
}

/* --- Corps du texte --- */

.ip-article__corps { max-width: 68ch; }

.ip-article__corps h2 {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin: 52px 0 16px;
  padding-top: 22px;
  border-top: 1px solid var(--ip-filet);
  scroll-margin-top: 96px;   /* le titre ne passe pas sous l'en-tête collant */
}
.ip-article__corps h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.ip-article__corps h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 30px 0 8px;
  color: var(--ip-encre);
}

.ip-article__corps p {
  margin: 0 0 17px;
  font-size: 16.5px;
  line-height: 1.68;
  color: var(--ip-texte-2);
}
.ip-article__corps strong { color: var(--ip-encre); font-weight: 600; }
.ip-article__corps a { color: var(--ip-signal); text-decoration: underline; }

.ip-article__corps ul, .ip-article__corps ol { margin: 0 0 20px; padding-left: 22px; }
.ip-article__corps li {
  margin-bottom: 8px;
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--ip-texte-2);
}
.ip-article__corps li::marker { color: var(--ip-signal); }

/* Note d'ouverture en italique — mention de révision, avertissement. */
.ip-article__corps > p > em:only-child {
  display: block;
  font-style: normal;
  font-family: var(--ip-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ip-texte-4);
  padding-bottom: 20px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ip-filet-clair);
}

/* --- Encadrés --- */

.ip-encadre {
  margin: 26px 0;
  padding: 20px 24px;
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-left: 3px solid var(--ip-signal);
  border-radius: var(--ip-rayon);
}
.ip-encadre p:last-child { margin-bottom: 0; }
.ip-encadre__titre {
  margin: 0 0 8px !important;
  font-family: var(--ip-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ip-signal) !important;
}

/* Variante avertissement : délai à ne pas manquer, risque. */
.ip-encadre--alerte { border-left-color: var(--ip-alerte); }
.ip-encadre--alerte .ip-encadre__titre { color: var(--ip-alerte) !important; }

/* --- Tableaux --- */

.ip-article__corps table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 15px;
}
.ip-article__corps th {
  text-align: left;
  padding: 10px 12px 10px 0;
  border-bottom: 2px solid var(--ip-encre);
  font-family: var(--ip-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
  font-weight: 400;
}
.ip-article__corps td {
  padding: 11px 12px 11px 0;
  border-bottom: 1px solid var(--ip-filet-clair);
  color: var(--ip-texte-2);
  vertical-align: top;
}
.ip-article__corps td:first-child { color: var(--ip-encre); font-weight: 500; }
.ip-article__corps th:last-child,
.ip-article__corps td:last-child { padding-right: 0; text-align: right; font-variant-numeric: tabular-nums; }

.ip-article__maj {
  margin-top: 48px;
  padding-top: 18px;
  border-top: 1px solid var(--ip-filet);
}

@media (max-width: 780px) {
  .ip-article__corps h2 { font-size: 22px; margin-top: 38px; }
  .ip-article__corps h3 { font-size: 17.5px; }
  .ip-article__corps p, .ip-article__corps li { font-size: 15.5px; }
  .ip-encadre { padding: 16px 18px; }
  .ip-article__corps table { font-size: 14px; }
  .ip-article__corps th, .ip-article__corps td { padding-right: 8px; }
}

/* ==========================================================================
   PIED DE PAGE COLLÉ AU BAS

   Sur une page courte — confirmation, erreur, contenu bref — le pied
   remontait au milieu de l'écran avec du vide en dessous. L'impression
   donnée est celle d'un site cassé, pas d'une page sobre.

   La structure s'y prête : header, #ip-corps et footer sont tous des
   enfants directs de body. Il suffit d'étirer le corps.
   ========================================================================== */

body.ip-fond {
  display: flex;
  flex-direction: column;

  /* 100dvh suit la barre d'adresse mobile, qui se rétracte au
     défilement ; 100vh reste le repli pour les navigateurs qui ne la
     connaissent pas. L'ordre compte : le second écrase le premier. */
  min-height: 100vh;
  min-height: 100dvh;
}

/* Le corps absorbe l'espace disponible et repousse le pied.
   flex-shrink: 0 empêche une page longue d'être comprimée. */
body.ip-fond > #ip-corps {
  flex: 1 0 auto;
}

/* Ceinture et bretelles : si un gabarit n'ouvre pas #ip-corps — un
   modèle Divi, une page d'erreur — la marge automatique pousse quand
   même le pied vers le bas. */
body.ip-fond > .ip-pied {
  flex: none;
  margin-top: auto;
}

/* L'en-tête ne doit ni s'étirer ni se comprimer. */
body.ip-fond > .ip-entete {
  flex: none;
}