/* ==========================================================================
   InfoPrime — pont entre les gabarits existants et la feuille de référence

   Les gabarits du tunnel (formSecond / formThird / formFourth /
   confirmation) portent des noms de classes anterieurs au dossier
   d'integration. Ce fichier les fait CORRESPONDRE au vocabulaire de
   reference, sans introduire une seule valeur nouvelle : chaque regle
   reprend un jeton deja defini dans infoprime-ui.css.

   Objectif : ne pas reecrire 1700 lignes de logique metier qui
   fonctionne, tout en obtenant exactement le rendu de la maquette.
   ========================================================================== */

/* ==========================================================================
   ALIAS DE VARIABLES

   Les gabarits emploient encore des variables de l'ancien systeme, en
   attribut style= inline. Une variable inconnue vaut ZERO en CSS, sans
   la moindre erreur : c'est ainsi que la rangee "Assurer plusieurs
   personnes" se retrouvait collee au champ (--ip-e5 n'existait plus).
   Ces alias pointent vers les jetons de la feuille de reference — aucune
   valeur nouvelle, seulement un pont de nommage.
   ========================================================================== */

:root {
  /* Espacements (echelle par multiples de 8, comme la reference) */
  --ip-e1: 4px;
  --ip-e2: 8px;
  --ip-e3: 14px;
  --ip-e4: 20px;
  --ip-e5: 28px;
  --ip-e6: 36px;
  --ip-e7: 56px;
  --ip-e8: 80px;

  /* Couleurs — renvoient vers les jetons de reference */
  --ip-texte: var(--ip-sans);
  --ip-mono-police: var(--ip-mono);
  --ip-encre-douce: var(--ip-texte-2);
  --ip-trait: var(--ip-filet);
  --ip-azur: var(--ip-signal);
  --ip-vert: var(--ip-signal);
  --ip-creme: var(--ip-papier);
  --ip-blanc: var(--ip-surface);
  --ip-grenat: var(--ip-alerte);

  /* Tailles */
  --ip-t-lg: 16.5px;
  --ip-t-md: 14.5px;
  --ip-t-sm: 13px;

  /* Hauteur de l'en-tete collant */
  --ip-entete: 70px;
  --ip-largeur: var(--ip-contenu);
  --ip-gouttiere: 32px;
}

/* --- Correspondance des conteneurs -------------------------------------- */

/* .ip-page (gabarits) == conteneur de contenu */
.ip-page {
  max-width: var(--ip-contenu);
  margin-inline: auto;
  padding-inline: var(--ip-gouttiere);
  padding-bottom: 96px;
}
.ip-page--sous-entete { padding-top: 44px; }

/* .ip-fond (body) == papier, sans contrainte de largeur */
.ip-fond { background: var(--ip-papier); min-height: 100vh; }

.ip-contenu {
  max-width: var(--ip-contenu);
  margin-inline: auto;
  padding-inline: var(--ip-gouttiere);
}

/* --- Correspondance des composants -------------------------------------- */

/* .ip-panneau == .ip-carte */
.ip-panneau {
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-radius: var(--ip-rayon);
  padding: 32px;
}

/* .ip-section__titre == .ip-groupe__titre */
.ip-section__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-etiquette == libelle mono */
.ip-etiquette {
  display: block;
  font-family: var(--ip-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
}

/* .ip-aide == .ip-note */
.ip-aide {
  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-champ (gabarits : un input) == .ip-input (reference) */
.ip-champ,
.ip select,
.ip input[type="text"],
.ip input[type="tel"],
.ip input[type="email"],
.ip input[type="number"],
.ip input[type="password"],
.ip input[type="date"] {
  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;
  -webkit-appearance: none;
  box-shadow: none;
}
.ip textarea.ip-champ { height: auto; padding: 14px; line-height: 1.5; }

.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;
  cursor: pointer;
}
.ip select:disabled { background-color: var(--ip-filet-clair); color: var(--ip-texte-4); cursor: not-allowed; opacity: 1; }

/* --- Rythme vertical (gabarits) ----------------------------------------- */

.ip-pile    > * + * { margin-top: 20px; }
.ip-pile-sm > * + * { margin-top: 8px; }
.ip-pile-lg > * + * { margin-top: 36px; }

.ip-rangee { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; min-width: 0; }
.ip-rangee--fin { justify-content: flex-end; }
.ip-rangee > * { min-width: 0; }

.ip-grille { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 760px) {
  .ip-grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ip-grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ip-montant { font-size: 32px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.ip-citation { border-left: 2px solid var(--ip-signal); padding-left: 20px; color: var(--ip-texte-2); font-size: 14.5px; }

/* --- Cases a cocher (structure : input + label.cadre vide + label texte) - */

.check { display: flex; align-items: center; gap: 8px; min-height: 40px; }
.check > input[type="checkbox"],
.check > input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }

.check > .cadre {
  flex: none;
  width: 20px; height: 20px;
  border: 1px solid var(--ip-bord-champ);
  border-radius: var(--ip-rayon);
  background: var(--ip-surface);
  cursor: pointer;
  position: relative;
  margin: 0;
}
.check > input:checked + .cadre { background: var(--ip-signal); border-color: var(--ip-signal); }
.check > input:checked + .cadre::after {
  content: '';
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check > input:focus-visible + .cadre { outline: 2px solid var(--ip-signal); outline-offset: 2px; }
.check > label:not(.cadre) { cursor: pointer; font-size: 14.5px; line-height: 1.4; margin: 0; }

/* Consentement : meme structure, texte long */
.check:has(label:not(.cadre) a) { align-items: flex-start; min-height: auto; gap: 12px; }
.check:has(label:not(.cadre) a) > .cadre { margin-top: 2px; }
.check:has(label:not(.cadre) a) > label:not(.cadre) {
  flex: 1 1 auto; min-width: 0; line-height: 1.5; color: #4A5057;
}

/* .ip-bascule == .ip-puces */
.ip-bascule { display: inline-flex; border: 1px solid var(--ip-bord-champ); border-radius: var(--ip-rayon); overflow: hidden; }
.ip-bascule label { padding: 10px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer; background: var(--ip-surface); color: #3A4048; }
.ip-bascule label:has(input:checked) { background: var(--ip-encre); color: var(--ip-papier); }
.ip-bascule input { position: absolute; opacity: 0; pointer-events: none; }

.ip-btn-rond {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border: 1px solid var(--ip-bord-champ);
  border-radius: var(--ip-rayon);
  background: var(--ip-surface);
  font-size: 18px; cursor: pointer; color: var(--ip-encre);
}
.ip-btn-rond:hover { border-color: var(--ip-encre); }

.ip-lien-bouton {
  background: none; border: 0; padding: 0;
  font-family: var(--ip-mono); font-size: 11px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ip-texte-3); cursor: pointer; text-decoration: underline;
}
.ip-lien-bouton:hover { color: var(--ip-encre); }

/* --- Blocs personne ----------------------------------------------------- */

h3[id^="form-group-title-"] {
  display: block !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  margin: 36px 0 20px !important;
  padding-top: 28px !important;
  border-top: 1px solid var(--ip-filet) !important;
}
h3#form-group-title-1 { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; }
#form-group-container > * + * { margin-top: 28px; }

/* --- Ecran resultats : reprise sur Bootstrap 5 -------------------------- */

.ip .btn-primary, .ip .btn-primary:focus {
  background-color: var(--ip-signal) !important;
  border-color: var(--ip-signal) !important;
  color: #fff !important;
  border-radius: var(--ip-rayon) !important;
  font-family: var(--ip-sans) !important;
  font-weight: 600;
  min-height: 48px;
}
.ip .btn-primary:hover, .ip .btn-primary:active {
  background-color: var(--ip-signal-survol) !important;
  border-color: var(--ip-signal-survol) !important;
}
.ip .btn-outline-secondary {
  border-color: var(--ip-bord-bouton) !important;
  color: var(--ip-encre) !important;
  border-radius: var(--ip-rayon) !important;
  font-family: var(--ip-sans) !important;
}
.ip .btn-outline-secondary:hover { background-color: var(--ip-surface) !important; color: var(--ip-encre) !important; }
.ip .btn-link { color: var(--ip-signal) !important; font-family: var(--ip-sans) !important; }

/* text-danger sert d'accent sur l'exercice (vert) et d'alerte sur un
   surcout reel (rouge). Bootstrap confond les deux. */
.ip h1 .text-danger, .ip h2 .text-danger, .ip b.text-danger { color: var(--ip-signal) !important; }
.ip p.text-danger, .ip span.text-danger, .ip td .text-danger { color: var(--ip-alerte) !important; }

.ip .card { border-color: var(--ip-filet) !important; border-radius: var(--ip-rayon) !important; background: var(--ip-surface); }
.ip .border-success { border-color: var(--ip-signal) !important; }
.ip .text-success { color: var(--ip-signal) !important; }
.ip .bg-success { background-color: var(--ip-signal) !important; }
.ip .form-control, .ip .form-select {
  border-color: var(--ip-bord-champ) !important;
  border-radius: var(--ip-rayon) !important;
  font-family: var(--ip-sans) !important;
  min-height: 48px;
}
.ip .progress { background: #E6E3DB !important; border-radius: 0 !important; height: 5px !important; }
.ip .progress-bar { background: var(--ip-signal) !important; }

/* --- En-tete de la page resultats --------------------------------------- */

.ip-resultats__tete { margin-bottom: 36px; }
.ip-resultats__retour { display: inline-block; margin-bottom: 20px; }
.ip-resultats__fil { margin: 0 0 8px; }
.ip-resultats__ligne { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.ip-resultats__titre {
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 700;
  letter-spacing: -0.038em;
  line-height: 1.04;
  margin: 0;
}
.ip-resultats__affichage { display: flex; align-items: center; gap: 12px; }

/* .ip-vue-bascule == .ip-puces (bascule cartes / tableau) */
.ip-vue-bascule { display: inline-flex; border: 1px solid var(--ip-bord-champ); border-radius: var(--ip-rayon); overflow: hidden; }
.ip-vue-bascule button {
  padding: 7px 11px;
  font-family: var(--ip-sans); font-size: 13px; font-weight: 600;
  background: var(--ip-surface); border: 0; cursor: pointer; color: #3A4048;
}
.ip-vue-bascule button[aria-pressed="true"] { background: var(--ip-encre); color: var(--ip-papier); }

/* --- Tableau des offres : correspondance avec .ip-tableau --------------- */

.ip-offres-defilement {
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-radius: var(--ip-rayon);
  overflow-x: auto;
}
.ip-offres-table { width: 100%; min-width: 790px; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; }
.ip-offres-table thead 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);
  white-space: nowrap;
}
.ip-offres-table tbody td { padding: 15px 18px; border-top: 1px solid var(--ip-filet-clair); font-size: 14.5px; color: var(--ip-texte-2); }
.ip-offres-table tbody tr.ip-offre--meilleure { background: #FBFAF7; }
.ip-offres-table .ip-offre__assureur { font-size: 16px; font-weight: 600; color: var(--ip-encre); }
.ip-offres-table .ip-offre__modele { font-size: 14.5px; color: var(--ip-texte-2); }
.ip-offres-table .ip-offre__prime { font-size: 18px; font-weight: 600; color: var(--ip-encre); letter-spacing: -0.02em; white-space: nowrap; }
.ip-offres-table .ip-offre__eco { font-size: 17px; font-weight: 600; color: var(--ip-signal); white-space: nowrap; }
.ip-offres-table td.ip-offre__action { text-align: right; white-space: nowrap; }
.ip-offres-table .ip-offre__mesure { display: block; height: 4px; background: #E6E3DB; margin: 7px 0 0 auto; width: 104px; }
.ip-offres-table .ip-offre__mesure > span { display: block; height: 100%; background: var(--ip-signal); }

/* --- Barre fixe : correspondance avec .ip-barre-fixe -------------------- */

.ip-barre-collante {
  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-collante__contenu {
  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-collante__faits { display: flex; flex-wrap: wrap; gap: 36px; align-items: baseline; }
.ip-barre-collante__faits > div { display: flex; flex-direction: column; gap: 2px; }
.ip-barre-collante__faits .ip-mono { font-family: var(--ip-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8B939C; }
.ip-barre-collante__faits strong { font-size: 17px; font-weight: 600; color: var(--ip-papier); }
.ip-barre-collante__eco { color: var(--ip-signal-sombre) !important; font-weight: 700 !important; }
body:has(.ip-barre-collante) { padding-bottom: 140px; }

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

.ip-accuse { background: var(--ip-signal-clair); border: 1px solid var(--ip-signal); border-radius: var(--ip-rayon); padding: 32px; }
.ip-accuse h1, .ip-accuse h2 { color: var(--ip-signal); }

/* .ip-suite / .ip-etape : anciens noms, memes styles que .ip-etapes de la
   reference — pastille ronde numerotee, texte a droite. */
.ip-suite { list-style: none; margin: 0; padding: 0; }
.ip-etape { display: flex; gap: 20px; padding-bottom: 28px; }
.ip-etape:last-child { padding-bottom: 0; }
.ip-etape__rang {
  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-etape h3 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.ip-etape p { margin: 0; font-size: 15.5px; color: var(--ip-texte-2); line-height: 1.6; }

.ip-bilan { background: var(--ip-encre); color: var(--ip-papier); border-radius: var(--ip-rayon); padding: 30px; }
.ip-bilan h2, .ip-bilan h3 { color: var(--ip-papier); }
.ip-bilan__eco { color: var(--ip-signal-sombre); font-weight: 600; }
.ip-bilan .ip-etiquette { color: var(--ip-signal-sombre); }

.ip-coord dt {
  font-family: var(--ip-mono); font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ip-texte-3); margin-top: 14px;
}
.ip-coord dd { margin: 4px 0 0; font-size: 16px; }

/* --- Calculateur d'accueil (shortcode) ---------------------------------- */

.ip-calculateur {
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-top: 3px solid var(--ip-signal);
  border-radius: var(--ip-rayon);
  padding: 36px;
  box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 12px 32px rgba(18,20,23,.06);
}
.ip-calculateur__titre { font-size: 24px; font-weight: 600; letter-spacing: -0.028em; margin: 0 0 4px; }
.ip-calculateur__intro { margin: 0 0 28px; font-size: 15px; color: var(--ip-texte-2); }
.ip-calculateur__form .ip-champ { margin-bottom: 20px; }
.ip-calculateur__mention { text-align: center; }

/* --- Autocompletion NPA ------------------------------------------------- */

.autocomplete-suggestions-container { position: relative; width: 100%; }
.autocomplete-suggestions {
  position: absolute !important;
  top: 2px !important; left: 0 !important; right: 0 !important; width: auto !important;
  background: var(--ip-surface);
  border: 1px solid var(--ip-bord-champ);
  border-radius: var(--ip-rayon);
  max-height: 260px; overflow-y: auto; z-index: 70;
  box-shadow: 0 1px 2px rgba(18,20,23,.05), 0 12px 32px rgba(18,20,23,.06);
}
.autocomplete-suggestion {
  padding: 12px 14px; min-height: 48px;
  display: flex; align-items: center; cursor: pointer;
  font-size: 14.5px; border-bottom: 1px solid var(--ip-filet-clair);
}
.autocomplete-suggestion:last-child { border-bottom: 0; }
.autocomplete-suggestion:hover, .autocomplete-selected { background: var(--ip-papier); }
.autocomplete-suggestion strong { color: var(--ip-signal); font-weight: 600; margin-right: .35em; }

/* --- Infobulles d'aide -------------------------------------------------- */

.tooltip-content { display: none; }
.tooltip-content.est-ouvert, .tooltip-content[style*="block"] {
  display: block;
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-left: 3px solid var(--ip-signal);
  border-radius: var(--ip-rayon);
  padding: 20px; margin-top: 14px;
}
.tooltip-content h4 { font-size: 14.5px; font-weight: 600; margin: 0 0 8px; }
.tooltip-content p { margin: 0 0 8px; font-size: 13px; color: var(--ip-texte-2); line-height: 1.6; }
.tooltip-content p:last-child { margin-bottom: 0; }

/* --- Reference (colonne gauche des resultats) --------------------------- */

.ip-resultats-grille__cote > .card, .ip-resultats-grille__cote > div > .card {
  background: var(--ip-surface) !important;
  border: 1px solid var(--ip-filet) !important;
  box-shadow: none !important;
}
.ip-resultats-grille__cote .card-body { padding: 24px !important; }
.ip-resultats-grille__cote .card-body .fs-5 {
  font-family: var(--ip-mono);
  font-size: 10.5px !important;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ip-texte-3); margin-bottom: 14px; line-height: 1.5;
}
.ip-resultats-grille__cote .card-body img { max-height: 34px; width: auto; margin-bottom: 8px; }
.ip-resultats-grille__cote .card-body p { font-size: 13px; margin-bottom: 8px; }

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

@media (max-width: 780px) {
  .ip-panneau, .ip-bilan, .ip-accuse, .ip-calculateur { padding: 22px; }
  .ip-montant { font-size: 24px; }
  .ip-rangee--fin { justify-content: stretch; }
  .ip-rangee--fin .ip-btn { flex: 1; }
  .ip-barre-collante__faits { gap: 18px; flex: 1; min-width: 0; }
  .ip-barre-collante__faits > div:first-child { display: none; }
  .ip-barre-collante__contenu { gap: 12px; }
  body:has(.ip-barre-collante) { padding-bottom: 200px; }
}

/* --- Menu mobile ---------------------------------------------------------
   La reference construit l'en-tete via un module Code Divi et ne prevoit
   pas de bouton de menu. Notre en-tete est un vrai gabarit PHP : il lui
   faut ce bouton sous 980px, la ou la reference masque deja telephone,
   langues et exercice.
   ------------------------------------------------------------------------ */

.ip-entete__bascule {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.ip-entete__bascule span { display: block; height: 2px; width: 22px; background: var(--ip-encre); margin-inline: auto; }

@media (max-width: 980px) {
  .ip-entete__bascule { display: flex; }
  .ip-entete__interieur { flex-wrap: nowrap; }

  /* Le menu mobile est declare dans infoprime-ui.css, juste apres
     .ip-nav { display: flex } : ce fichier-ci est charge EN PREMIER, la
     regle generale y aurait toujours gagne et le menu serait reste
     ouvert en permanence. */
  .ip-entete { position: sticky; }
}

/* ==========================================================================
   CORRESPONDANCES RESTANTES
   Les gabarits emploient encore quelques noms anterieurs. Chaque regle
   ci-dessous ne fait que REPRENDRE un composant deja defini dans la
   feuille de reference — aucune valeur nouvelle n'est introduite.
   ========================================================================== */

/* Accueil : .ip-heros == .ip-duo */
.ip-heros {
  display: grid; gap: 56px;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
  align-items: start;
  padding: 72px 0 64px;
}
.ip-heros__titre {
  font-size: clamp(42px, 5.4vw, 78px);
  font-weight: 700; letter-spacing: -0.042em; line-height: 0.98;
  margin: 0 0 26px; text-wrap: balance;
}
/* Le titre de l'accueil porte .ip-heros__titre, pas .ip-h1 : la regle
   ".ip-h1 .ip-chiffre" de la feuille de reference ne l'atteignait pas,
   et le montant sortait en noir. On couvre les deux noms de classe. */
.ip-heros__chiffre,
.ip-heros__titre .ip-chiffre,
.ip-chiffre { color: var(--ip-signal); }
.ip-heros__precision { font-size: 19px; line-height: 1.5; color: #4A5057; max-width: 46ch; margin: 0 0 36px; }
.ip-heros__outil-titre { font-size: 24px; font-weight: 600; letter-spacing: -0.028em; margin: 0 0 4px; }
.ip-heros__outil-intro { margin: 0 0 28px; font-size: 15px; color: var(--ip-texte-2); line-height: 1.5; }
.ip-heros__form .ip-champ { margin-bottom: 20px; }
.ip-heros__form .ip-btn { height: 50px; margin-top: 4px; }
.ip-heros__mention { text-align: center; }

/* .ip-carte--entree == .ip-carte--accent */
.ip-carte--entree {
  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);
  padding: 36px;
}

/* .ip-chiffres == .ip-stats */
.ip-chiffres { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ip-encre); }
.ip-chiffres__item { padding: 16px 20px 0 0; border-right: 1px solid var(--ip-filet); }
.ip-chiffres__item + .ip-chiffres__item { padding-left: 20px; }
.ip-chiffres__item:last-child { border-right: 0; padding-right: 0; }
.ip-chiffres__valeur { font-size: 30px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; }
.ip-chiffres__label {
  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-points / .ip-point == .ip-trio / .ip-argument */
.ip-points { display: grid; gap: 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.ip-point__num { font-family: var(--ip-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--ip-signal); margin-bottom: 14px; }
.ip-point h3 { font-size: 21px; font-weight: 600; letter-spacing: -0.025em; margin: 0 0 10px; line-height: 1.25; }
.ip-point p { margin: 0; font-size: 15.5px; color: var(--ip-texte-2); line-height: 1.6; }

/* .ip-question == accordeon natif de .ip-faq */
.ip-question { border-bottom: 1px solid var(--ip-filet); }
.ip-question > summary {
  list-style: none; cursor: pointer; position: relative;
  font-size: 19px; font-weight: 600; letter-spacing: -0.02em;
  padding: 22px 40px 22px 0;
}
.ip-question > summary::-webkit-details-marker { display: none; }
.ip-question > 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-question[open] > summary::after { content: '–'; }
.ip-question p { padding: 0 0 24px; margin: 0; font-size: 16px; color: var(--ip-texte-2); line-height: 1.65; max-width: 74ch; }

/* Bandeaux et appel */
.ip-bandeau__contenu {
  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__contenu strong { color: var(--ip-papier); font-weight: 400; }
.ip-appel__texte { max-width: 56ch; }

/* Cantons : en-tete du tableau d'ecarts */
.ip-cantons__tete {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: flex-end; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid var(--ip-encre); margin-bottom: 32px;
}
.ip-titre-section--nu { margin: 0 !important; padding: 0 !important; border: 0 !important; }
.ip-cantons__legende { margin: 0; font-size: 13px; color: var(--ip-texte-3); }

/* Sur-titres mono */
.ip-mono--accent { color: var(--ip-signal); }
.ip-mono--clair  { color: var(--ip-signal-sombre); }

/* Boutons secondaires du tunnel */
.ip-btn--discret {
  background: none; border: 0; padding: 0; min-height: auto;
  font-family: var(--ip-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ip-texte-3);
}
.ip-btn--discret:hover { color: var(--ip-encre); text-decoration: none; }
.ip-btn--sombre { background: var(--ip-papier); color: var(--ip-encre) !important; border: 0; }
.ip-btn--sombre:hover { background: #fff; color: var(--ip-encre) !important; }

/* Offres : fanion, jauge, carte mise en avant */
.ip-fanion {
  display: inline-block;
  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;
}
.ip-carte--meilleure { border-color: var(--ip-encre); border-left: 3px solid var(--ip-signal); }
.ip-jauge__barre { display: block; height: 100%; background: var(--ip-signal); }
.ip-jauge__barre--sup { background: var(--ip-alerte); }

/* Recapitulatif lateral */
.ip-recap__qui { color: #9BA3AC; font-size: 14px; }
.ip-recap__faits { display: flex; flex-wrap: wrap; gap: 8px; }
.ip-recap__fait {
  font-family: var(--ip-mono); font-size: 10px;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--ip-signal-clair); color: var(--ip-signal);
  padding: 4px 8px; border-radius: var(--ip-rayon);
}

/* Grille des resultats */
.ip-grille--resultats { display: grid; gap: 36px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .ip-grille--resultats { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
}

.ip-section--fin { padding-bottom: 96px; }

@media (max-width: 780px) {
  .ip-heros { grid-template-columns: 1fr; gap: 32px; padding: 48px 0 40px; }
  .ip-heros__precision { font-size: 16.5px; }
  .ip-chiffres { grid-template-columns: 1fr; border-top: 0; }
  .ip-chiffres__item, .ip-chiffres__item + .ip-chiffres__item {
    border-right: 0; border-top: 1px solid var(--ip-filet); padding: 14px 0 12px;
  }
  .ip-carte--entree { padding: 22px; }
  .ip-question > summary { font-size: 17px; }
}

/* Colonne texte du heros — simple conteneur, aucune mise en forme propre. */
.ip-heros__texte { min-width: 0; }

/* ==========================================================================
   PAGE RÉSULTATS — largeur et débordement

   formThird utilise un conteneur Bootstrap (.container), dont la largeur
   maximale ne correspond pas aux 1280px de la reference : le tableau
   debordait et les boutons "Demander" se retrouvaient hors champ, imposant
   un defilement horizontal meme sur grand ecran.
   ========================================================================== */

.ip main.container,
.ip .container {
  max-width: var(--ip-contenu) !important;
  padding-inline: var(--ip-gouttiere) !important;
  margin-inline: auto !important;
  width: 100% !important;
}

/*
 * Le tableau ne defile QUE lorsqu'il ne peut pas tenir. Sur un ecran
 * large il occupe la largeur disponible, et le nom du modele passe a la
 * ligne plutot que de pousser les colonnes suivantes hors du cadre.
 */
@media (min-width: 1000px) {
  .ip-offres-defilement { overflow-x: visible; }
  .ip-offres-table { min-width: 0; width: 100%; }
  .ip-offres-table .ip-offre__modele { white-space: normal; }
  .ip-offres-table thead th { white-space: normal; }
  .ip-offres-table td, .ip-offres-table th { padding: 15px 14px; }
}

/* Les colonnes de chiffres et l'action restent insecables : un montant
   coupe en deux lignes serait illisible. */
.ip-offres-table .ip-offre__prime,
.ip-offres-table .ip-offre__eco,
.ip-offres-table td.ip-offre__action { white-space: nowrap; }

/* Rangée d'ajout de personne — la marge vient d'ici, plus d'un style
   inline qui dependait d'une variable disparue. */
#form-group-container + .ip-rangee,
.ip-rangee[style*="margin-top"] { margin-top: 28px !important; }

/* ==========================================================================
   PANNEAU « AFFINER » + DÉBORDEMENT DU TABLEAU
   ========================================================================== */

.ip-filtres { margin-bottom: 20px; }
.ip-filtres .ip-champ__label { margin-top: 20px; }
.ip-filtres .ip-champ__label:first-of-type { margin-top: 0; }
.ip-filtres .ip-puces { margin-bottom: 0; }

/*
 * Le cadre du tableau bornait ses lignes, mais la derniere cellule
 * (l'action) debordait vers la droite : les boutons "Demander" sortaient
 * du cadre blanc. La table doit occuper exactement la largeur du cadre,
 * jamais davantage.
 */
.ip-offres-defilement { max-width: 100%; }
.ip-offres-table { table-layout: auto; width: 100%; max-width: 100%; }
.ip-offres-table td.ip-offre__action { width: 1%; padding-right: 18px; }
.ip-offres-table .ip-btn--secondaire {
  padding: 8px 14px;
  font-size: 13.5px;
  min-height: auto;
  white-space: nowrap;
}

/* Une ligne masquee par le filtre ou la pagination ne doit rien occuper. */
.ip-offres-table tr[hidden] { display: none; }

/* .ip-ligne-offre : ancrage JavaScript pour le filtre et la pagination.
   Aucune mise en forme propre — declaree ici pour qu'elle ne soit pas
   prise pour un oubli lors d'un futur controle de couverture. */
.ip-ligne-offre { /* pas de style */ }

/* ==========================================================================
   MOBILE — corrections mesurées

   Deux causes de débordement, l'une masquant l'autre :

   1. minmax(430px, 1fr) impose une colonne d'au moins 430px. Sur un
      écran de 390px, la grille déborde et pousse TOUT le contenu hors
      cadre — c'est ce qui décalait le titre. auto-fit ne protège pas de
      ça : il réduit le nombre de colonnes, jamais leur largeur minimale.

   2. Le clamp du titre part de 42px. Sur 390px de large, une ligne
      comme « d'écart » n'y tient pas et déborde à son tour.
   ========================================================================== */

@media (max-width: 780px) {

  /* Aucune colonne ne peut exiger plus que la largeur disponible. */
  .ip-duo,
  .ip-duo--formulaire,
  .ip-trio,
  .ip-heros,
  .ip-points,
  .ip-grille--resultats {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Titres : plancher abaissé, échelle relative à la largeur réelle. */
  .ip-h1,
  .ip-heros__titre { font-size: clamp(28px, 8.5vw, 40px) !important; line-height: 1.04; }
  .ip-h1--interne,
  .ip-resultats__titre { font-size: clamp(24px, 7vw, 32px) !important; }

  /*
   * Filet de securite contre les debordements accidentels — pose sur
   * body seul, PAS sur html.
   *
   * Sur html, il bloquait aussi le defilement horizontal LEGITIME du
   * tableau des offres : ses six colonnes ne tiennent pas sur 390px, et
   * les prix devenaient inatteignables. Un conteneur en overflow:auto
   * ne peut pas defiler si un ancetre est en overflow:hidden.
   */
  body { overflow-x: hidden; }
  .ip img, .ip pre { max-width: 100%; }

  /* Chiffres clés : resserrés, le libellé sous la valeur. */
  .ip-stats > div,
  .ip-chiffres__item { padding: 12px 0 10px !important; }
  .ip-stats__valeur,
  .ip-chiffres__valeur { font-size: 26px; }

  /* Menu ouvert : liens alignés à gauche, comme le reste de la page. */
  .ip-nav { text-align: left; align-items: stretch; }
  .ip-nav a { display: block; }
  .ip-nav .ip-btn { justify-content: center; }
  .ip-tel, .ip-langues { display: none; }

  /* Le bandeau sombre et l'appel final respirent moins. */
  .ip-bandeau__interieur,
  .ip-bandeau__contenu { padding: 20px var(--ip-gouttiere); gap: 10px 24px; }
  .ip-appel { padding: 28px 22px; }
  .ip-appel h2 { font-size: 24px; }

  /* Pied de page : une colonne, pas quatre écrasées. */
  .ip-pied__grille { grid-template-columns: minmax(0, 1fr); gap: 32px; padding: 40px var(--ip-gouttiere) 28px; }
  .ip-pied p { max-width: none; }
}

/* Très petits écrans : le titre doit encore pouvoir tenir. */
@media (max-width: 380px) {
  .ip-h1, .ip-heros__titre { font-size: 26px !important; }
  /* --ip-gouttiere n'est PLUS redefinie ici : infoprime-ui.css est charge
     APRES et impose sa propre valeur. Deux declarations concurrentes
     donnaient un resultat dependant de l'ordre — d'ou du texte colle aux
     bords sur certaines sections. La valeur mobile est fixee dans
     infoprime-ui.css, seul endroit ou elle fait autorite. */
}

/* ==========================================================================
   RAPPEL DE RECHERCHE (colonne gauche des résultats)
   Remplace l'ancien panneau « Affiner » : franchise et accident sont
   propres a chaque personne et dependent de la requete serveur, donc
   affiches en lecture seule, detaille par personne.
   ========================================================================== */

.ip-rappel { margin-bottom: 20px; }
.ip-rappel__personne { padding: 12px 0; border-top: 1px solid var(--ip-filet); }
.ip-rappel__personne:first-of-type { border-top: 0; padding-top: 0; }
.ip-rappel__qui { font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.ip-rappel__ne { font-weight: 400; color: var(--ip-texte-3); }
.ip-rappel__faits { display: flex; flex-wrap: wrap; gap: 6px; }
/*
 * Les pastilles en capitales espacees ne tiennent pas cote a cote dans
 * une colonne etroite : elles s'empilaient une par ligne, ce qui etirait
 * le bloc inutilement. En texte simple sur une ligne, l'information est
 * plus dense et plus lisible.
 */
.ip-rappel__faits {
  display: block;
  font-size: 13px;
  color: var(--ip-texte-2);
  line-height: 1.6;
}
.ip-rappel__faits span { display: block; }
.ip-rappel__faits span + span { margin-top: 2px; }
.ip-rappel__note { border-top: 1px solid var(--ip-filet); padding-top: 14px; margin-bottom: 0; }

/* ==========================================================================
   CARTES D'OFFRE — alignement conforme à la maquette

   Sur la capture, les chiffres passaient SOUS le nom de caisse alors que
   la maquette les place à droite sur la même ligne. Cause : le bloc de
   gauche n'avait pas de largeur souple, il poussait donc les chiffres
   au retour à la ligne dès que le nom était un peu long.
   ========================================================================== */

.ip-offre__haut {
  display: flex;
  flex-wrap: nowrap;
  gap: 24px;
  align-items: flex-start;
  justify-content: space-between;
}
.ip-offre__haut > div:first-child { flex: 1 1 auto; min-width: 0; }

.ip-offre__chiffres {
  flex: none;
  display: flex;
  flex-wrap: nowrap;
  gap: 16px 32px;
  align-items: flex-end;
}
.ip-offre__chiffres > div { flex: none; }

/* Le bouton garde sa taille compacte de la maquette. */
.ip-offre__chiffres .ip-btn {
  padding: 13px 22px;
  font-size: 15px;
  min-height: auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  /* En dessous, la ligne unique n'est plus tenable : on empile. */
  .ip-offre__haut { flex-wrap: wrap; }
  .ip-offre__chiffres { width: 100%; flex-wrap: wrap; gap: 20px 28px; }
  .ip-offre__chiffres .ip-btn { width: 100%; }
}

/* ==========================================================================
   TABLEAU — largeur figée

   Les colonnes se redimensionnaient au survol d'un bouton : table-layout
   auto recalcule la répartition dès qu'un élément change de taille.
   En mode fixe, la grille est arrêtée une fois pour toutes.
   ========================================================================== */

.ip-offres-table { table-layout: fixed; }
.ip-offres-table th:nth-child(1) { width: 18%; }
.ip-offres-table th:nth-child(2) { width: 26%; }
.ip-offres-table th:nth-child(3) { width: 12%; }
.ip-offres-table th:nth-child(4) { width: 16%; }
.ip-offres-table th:nth-child(5) { width: 16%; }
.ip-offres-table th:nth-child(6) { width: 12%; }
.ip-offres-table td { overflow-wrap: break-word; }

/*
 * Le bouton ne change JAMAIS de dimensions au survol : padding, bordure
 * et police sont figes. Seules les couleurs changent — c'est ce qui
 * evitait le "saut" de la colonne.
 */
.ip-offres-table .ip-btn--secondaire {
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 8px 10px !important;
  font-size: 13.5px;
  border-width: 1px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ip-offres-table .ip-btn--secondaire:hover,
.ip-offres-table .ip-btn--secondaire:focus-visible {
  background: var(--ip-signal) !important;
  border-color: var(--ip-signal) !important;
  color: #fff !important;
}

/* ==========================================================================
   OFFRE RETENUE (dernière étape)
   ========================================================================== */

.ip-offre-retenue__nom { font-size: 28px; font-weight: 700; letter-spacing: -0.032em; line-height: 1.1; margin-bottom: 4px; }
.ip-offre-retenue__detail { margin: 0 0 24px; font-size: 14.5px; color: var(--ip-texte-3); }
.ip-offre-retenue__ligne {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--ip-filet);
  font-size: 14.5px; color: var(--ip-texte-2);
}
.ip-offre-retenue__ligne strong { font-size: 18px; font-weight: 600; color: var(--ip-encre); }
.ip-offre-retenue__ligne--total { border-top-color: var(--ip-encre); }
.ip-offre-retenue__ligne--total span { font-weight: 600; color: var(--ip-encre); }
.ip-offre-retenue__eco { font-size: 22px !important; font-weight: 700 !important; color: var(--ip-signal) !important; }
.ip-offre-retenue__personnes {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ip-filet);
  font-size: 13px; color: var(--ip-texte-3); line-height: 1.7;
}

/* ==========================================================================
   ESPACEMENT DES CARTES + SURVOL VERT

   Les cartes d'offre étaient collées : .ip-offres porte le gap, mais la
   boucle PHP rend les <article> sans conteneur en grille. On pose donc
   l'espacement sur les articles eux-mêmes.
   ========================================================================== */

.ip-offre + .ip-offre { margin-top: 14px; }
#ip-offres-cartes > .ip-offre:first-child { margin-top: 0; }

/*
 * Boutons des cartes : mêmes règles que le tableau — dimensions figées,
 * seules les couleurs bougent. Le bouton secondaire vire au vert plein,
 * le principal fonce d'un ton.
 */
.ip-offre .ip-btn {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.ip-offre .ip-btn--secondaire:hover,
.ip-offre .ip-btn--secondaire:focus-visible {
  background: var(--ip-signal) !important;
  border-color: var(--ip-signal) !important;
  color: #fff !important;
}
.ip-offre .ip-btn--principal:hover { background: var(--ip-signal-survol) !important; }

/* ==========================================================================
   COLONNE DE GAUCHE — plus étroite

   260px suffisent pour le rappel et la caisse actuelle. La largeur
   précédente rognait l'espace du tableau, qui porte l'information utile.
   ========================================================================== */

/*
 * GRILLE DES RESULTATS
 *
 * Deux tentatives ont echoue en luttant contre Bootstrap : d'abord en
 * reecrivant flex sur .col-lg-4/8 (les deux systemes se contredisaient,
 * le tableau passait SOUS la colonne), puis en bornant seulement le
 * contenu (la colonne gardait ses 33 %, laissant ~200px de vide que le
 * tableau ne pouvait pas occuper).
 *
 * Solution : ce bloc n'utilise plus la grille Bootstrap du tout. Une
 * grille CSS dediee, un seul systeme, aucune contradiction possible.
 * La colonne laterale fait exactement 260px, le tableau prend tout le
 * reste.
 */
.ip-resultats-grille {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}
@media (min-width: 992px) {
  .ip-resultats-grille { grid-template-columns: 260px minmax(0, 1fr); }
}

.ip-resultats-grille__cote { min-width: 0; }
.ip-resultats-grille__principal { min-width: 0; }

.ip-rappel,
.ip-resultats-grille__cote .card { max-width: 100%; }
.ip-resultats-grille__cote .card-body { padding: 20px !important; }

/* ==========================================================================
   PAGE DE CONFIRMATION

   Colonne unique bornée à 760px, comme la maquette. L'ancienne version
   forçait deux colonnes étroites : la pastille chevauchait le titre, les
   paragraphes se cassaient sur trois mots, et les étapes n'avaient ni
   numéro ni respiration.
   ========================================================================== */

.ip-confirmation { padding-top: 64px; padding-bottom: 110px; }
.ip-confirmation__corps { max-width: 760px; }

.ip-confirmation .ip-pastille { margin-bottom: 26px; }
.ip-confirmation .ip-h1 { margin-bottom: 16px; }
.ip-confirmation .ip-chapeau { font-size: 19px; margin-bottom: 40px; max-width: 52ch; }

/* Les deux sections respirent l'une par rapport à l'autre. */
.ip-confirmation .ip-titre-section { margin-top: 44px; }
.ip-confirmation .ip-titre-section:first-of-type { margin-top: 0; }

.ip-confirmation__echeance {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--ip-filet);
}
.ip-confirmation__echeance .ip-note { margin: 0; max-width: 60ch; }

.ip-confirmation__horaires { margin: 0 0 24px; font-size: 15.5px; color: var(--ip-texte-2); }

.ip-confirmation__contacts { display: flex; flex-wrap: wrap; gap: 24px 56px; }
.ip-confirmation__contacts .ip-etiquette { margin-bottom: 5px; }
.ip-confirmation__lien {
  display: inline-block;
  font-size: 19px; font-weight: 600;
  color: var(--ip-signal);
  margin-right: 8px;
}

.ip-confirmation__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-top: 44px;
}

@media (max-width: 780px) {
  .ip-confirmation { padding-top: 40px; padding-bottom: 64px; }
  .ip-confirmation .ip-chapeau { font-size: 16.5px; }
  .ip-confirmation__contacts { gap: 20px; }
  .ip-confirmation__actions .ip-btn { width: 100%; }
}

/* ==========================================================================
   ÉVOLUTION DES PRIMES

   Barres partant de ZERO, pas une courbe a axe tronque. Sur des primes
   qui varient de 3 % d'une annee a l'autre, un axe demarrant sous le
   minimum produit une falaise spectaculaire mais mensongere. Les barres
   montrent la proportion reelle ; la variation exacte est ecrite en
   chiffres sous chaque barre, la ou elle se lit precisement.
   ========================================================================== */

.ip-evolution {
  margin: 0 0 20px;
  background: var(--ip-surface);
  border: 1px solid var(--ip-filet);
  border-radius: var(--ip-rayon);
  padding: 22px 26px 18px;
}

/* En-tete allegee : le titre de section de la page dit deja de quoi il
   s'agit, inutile de le repeter dans le cadre. */
.ip-evolution__tete {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 32px;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--ip-filet);
}
.ip-evolution__sous-titre {
  margin: 0;
  font-family: var(--ip-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
}

.ip-evolution__bilan { margin: 0; display: flex; align-items: baseline; gap: 10px; }
.ip-evolution__bilan .ip-etiquette { display: inline; }
.ip-evolution__bilan > span:last-child {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.ip-evolution__graphique { width: 100%; height: auto; display: block; }

.ip-evolution__repere { stroke: var(--ip-filet-clair); stroke-width: 1; }

/* Les annees passees en gris, l'annee en cours en vert : le regard va
   d'abord la ou se trouve l'information utile. */
.ip-evolution__barre { fill: #D5D1C8; }
.ip-evolution__barre--actuelle { fill: var(--ip-signal); }

.ip-evolution__valeur {
  font-family: var(--ip-sans);
  font-size: 15px;
  font-weight: 700;
  fill: var(--ip-encre);
}
.ip-evolution__annee {
  font-family: var(--ip-mono);
  font-size: 12px;
  fill: var(--ip-encre);
  letter-spacing: 0.06em;
}
.ip-evolution__graduation {
  font-family: var(--ip-mono);
  font-size: 10.5px;
  fill: var(--ip-texte-4);
  letter-spacing: 0.04em;
}
.ip-evolution__delta {
  font-family: var(--ip-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.ip-evolution__delta--hausse { fill: var(--ip-alerte); }
.ip-evolution__delta--baisse { fill: var(--ip-signal); }

.ip-evolution__source { margin-top: 16px; max-width: 68ch; }

/* Hausse en grenat, baisse en vert — dans le tableau comme sur le
   graphique, la couleur porte le sens. */
.ip-evolution__hausse { color: var(--ip-alerte); font-weight: 600; }
.ip-evolution__baisse { color: var(--ip-signal); font-weight: 600; }

@media (max-width: 780px) {
  .ip-evolution { padding: 20px; }
  .ip-evolution__tete { padding-bottom: 16px; }
  .ip-evolution__titre { font-size: 18px; }
  .ip-evolution__bilan { text-align: left; }
  .ip-evolution__bilan > span:last-child { font-size: 22px; }
  .ip-evolution__valeur { font-size: 13px; }
  .ip-evolution__annee { font-size: 11px; }
  .ip-evolution__delta { font-size: 10px; }
}

/* ==========================================================================
   PAGE PRIMES — intro
   ========================================================================== */

.ip-primes__intro { max-width: 760px; }
.ip-primes__intro .ip-h1 { margin-bottom: 16px; }
.ip-primes__intro .ip-chapeau { margin-bottom: 36px; max-width: 60ch; }
.ip-primes__intro .ip-stats { max-width: 620px; }

/* ==========================================================================
   MOBILE — cartes uniquement

   Le tableau et les cartes convergeaient sur petit ecran : deux rendus
   quasi identiques, entre lesquels le visiteur devait choisir sans
   raison. Sous 900px le selecteur disparait et les cartes s'imposent —
   plus lisibles au doigt, et pas de defilement horizontal.

   Le tableau reste disponible au-dessus de 900px, ou il est le plus
   dense et le plus utile.
   ========================================================================== */

@media (max-width: 900px) {

  /* Selecteur d'affichage masque : un seul rendu possible. */
  .ip-resultats__affichage { display: none; }

  /* Le conteneur du tableau est masque par le script (hidden), mais on
     le neutralise aussi en CSS au cas ou le script n'aurait pas encore
     tourne — evite un clignotement au chargement. */
  #ip-offres-liste { display: none !important; }

  /* --- Cartes : echelle adaptee --- */
  .ip-offre { padding: 18px 20px; }
  .ip-offre h3 { font-size: 19px; }
  .ip-offre__detail { font-size: 13px; }
  .ip-offre__prime, .ip-offre__eco { font-size: 24px; }
  .ip-offre__libelle { font-size: 9.5px; }
  .ip-offre__chiffres { gap: 14px 24px; }
  .ip-offre__fanion { font-size: 9.5px; padding: 3px 7px; }
  .ip-offre .ip-btn { padding: 12px 18px; font-size: 15px; }
  .ip-jauge { margin-top: 14px; }

  .ip-rappel, .ip-resultats-grille__cote .card { margin-bottom: 14px; }
  .ip-resultats-grille { gap: 18px; }
}

@media (max-width: 480px) {
  .ip-offre__chiffres { width: 100%; }
  .ip-offre__chiffres .ip-btn { width: 100%; margin-top: 4px; }
  .ip-offre__prime, .ip-offre__eco { font-size: 22px; }
}

/* ==========================================================================
   DÉTAIL PAR PERSONNE (carte d'offre)
   Repliable : utile pour vérifier une prime face au simulateur d'un
   assureur, sans alourdir la lecture quand on parcourt les offres.
   ========================================================================== */

.ip-offre__detail-personnes { margin-top: 14px; border-top: 1px solid var(--ip-filet-clair); }
.ip-offre__detail-personnes > summary {
  cursor: pointer;
  padding: 10px 0 4px;
  font-family: var(--ip-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ip-texte-3);
  list-style: none;
}
.ip-offre__detail-personnes > summary::-webkit-details-marker { display: none; }
.ip-offre__detail-personnes > summary::before { content: '+ '; font-weight: 700; }
.ip-offre__detail-personnes[open] > summary::before { content: '– '; }

.ip-detail-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.ip-detail-table td { padding: 7px 0; border-bottom: 1px solid var(--ip-filet-clair); font-size: 14px; }
.ip-detail-table__prix { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ip-detail-table__note {
  display: block;
  font-size: 11.5px;
  color: var(--ip-texte-4);
  font-family: var(--ip-mono);
  letter-spacing: 0.04em;
}
.ip-detail-table__total td { border-bottom: 0; border-top: 1px solid var(--ip-encre); font-weight: 600; padding-top: 10px; }

/* Message d'aide sous le choix de modèle. */
.ip-aide {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ip-texte-4);
  line-height: 1.5;
  min-height: 1.2em;
}
.ip-label .ip-note { font-weight: 400; text-transform: none; letter-spacing: 0; margin-left: 6px; }