/* ============================================================
   IMMOPRESS — feuille de styles de référence
   Design system v1.0 · novembre 2026
   Service édité par ReInvent (SAS, SIREN 107 095 671)

   Les maquettes HTML livrées utilisent des styles en ligne pour
   rester autonomes. Ce fichier est la traduction du design system
   en CSS réutilisable, destinée à l'intégration.
   ============================================================ */

/* ---------- 1. POLICES ---------- */
/* Barlow Condensed : titres, étiquettes, chiffres, navigation
   Public Sans      : chapôs, corps, formulaires, tableaux       */
/* Polices auto-hébergées : voir assets/css/app.css */

/* ---------- 2. TOKENS ---------- */
:root {
  /* Marque */
  --ip-marine:        #12294D; /* institution : bandeaux, filets, titres de rubrique */
  --ip-marine-hover:  #1B3A66;
  --ip-rouge:         #D6202B; /* rubrique + action, jamais décor */
  --ip-rouge-hover:   #A5121B;
  --ip-encre:         #0B1B2B; /* texte */

  /* Neutres froids — 9 niveaux */
  --ip-gris-50:  #F7F9FB;
  --ip-gris-100: #F2F4F7;
  --ip-gris-200: #E8ECF2;
  --ip-gris-300: #DEE4EC;
  --ip-gris-400: #C9D2DE;
  --ip-gris-500: #8FA1B8; /* jamais de texte : 3,0:1 */
  --ip-gris-600: #5B6672; /* texte secondaire : 5,3:1 AA */
  --ip-gris-700: #3B4856; /* corps : 9,4:1 AAA */
  --ip-gris-800: #22303D;

  /* Sémantique */
  --ip-succes:       #0F7A4A;
  --ip-succes-fond:  #E4F2EB;
  --ip-succes-texte: #0C6640;
  --ip-alerte:       #A6690B;
  --ip-alerte-fond:  #FBF0DC;
  --ip-alerte-texte: #6F4607;
  --ip-erreur:       #C4231C;
  --ip-erreur-fond:  #FBE7E5;
  --ip-erreur-texte: #8C1913;
  --ip-info-fond:    #EAF0F7;

  /* Contenu sponsorisé — ocre d'encart de presse, jamais le rouge */
  --ip-sponso-fond:   #FFF8E8;
  --ip-sponso-bord:   #C9A94F;
  --ip-sponso-bord-2: #E8D8A8;
  --ip-sponso-texte:  #6B4E00;
  --ip-sponso-texte-2:#7A5A00;

  /* Typographie */
  --ip-titre: "Barlow Condensed", "Helvetica Neue", sans-serif;
  --ip-texte: "Public Sans", system-ui, sans-serif;

  /* Espacement — base 4 px */
  --ip-1: 4px;  --ip-2: 8px;  --ip-3: 12px; --ip-4: 16px;
  --ip-6: 24px; --ip-8: 32px; --ip-12: 48px; --ip-16: 64px; --ip-24: 96px;

  /* Angles — aucun arrondi, sauf avatars. C'est ce qui sépare
     un journal d'une application grand public. */
  --ip-radius: 0;
  --ip-radius-champ: 2px;

  /* Élévations — 2 niveaux, très discrètes */
  --ip-ombre-1: 0 1px 2px rgba(11, 27, 43, .07);
  --ip-ombre-2: 0 10px 30px -10px rgba(11, 27, 43, .28);

  /* Mouvement — une seule courbe */
  --ip-vite:     120ms;
  --ip-standard: 180ms;
  --ip-entree:   240ms;
  --ip-courbe:   cubic-bezier(.2, 0, 0, 1);

  /* Grille */
  --ip-max:     1300px; /* largeur de page */
  --ip-lecture: 760px;  /* colonne d'article */
  --ip-gouttiere: 18px;
}

/* ---------- 3. RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--ip-encre);
  font-family: var(--ip-texte);
  font-size: 16px;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: var(--ip-marine); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--ip-rouge); }
:focus-visible { outline: 2px solid var(--ip-rouge); outline-offset: 2px; }
::selection { background: var(--ip-rouge); color: #fff; }

/* ---------- 4. ÉCHELLE TYPOGRAPHIQUE ---------- */
.ip-une {
  font-family: var(--ip-titre);
  font-weight: 700;
  font-size: clamp(30px, 6vw, 50px);
  line-height: 1.02;
  letter-spacing: -.008em;
  text-transform: uppercase;
  margin: 0 0 var(--ip-4);
  text-wrap: balance;
}
.ip-titre-article {
  font-family: var(--ip-titre);
  font-weight: 600;
  font-size: clamp(21px, 3vw, 32px);
  line-height: 1.12;
  margin: 0 0 var(--ip-2);
  text-wrap: pretty;
}
.ip-rubrique {
  font-family: var(--ip-titre);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ip-marine);
  margin: 0 0 var(--ip-4);
  padding-bottom: var(--ip-2);
  border-bottom: 2px solid var(--ip-marine); /* toujours souligné d'un filet 2 px */
}
.ip-etiquette { /* rubrique dans le fil : un mot rouge, sans fond ni pastille */
  font-family: var(--ip-titre);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ip-rouge);
}
.ip-chapo { font-size: 19px; line-height: 1.55; color: var(--ip-gris-700); }
.ip-corps { font-size: 17px; line-height: 1.68; max-width: 68ch; }
.ip-meta  { font-size: 12.5px; color: var(--ip-gris-600); }
.ip-chiffre {
  font-family: var(--ip-titre);
  font-weight: 700;
  font-size: 38px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* ---------- 5. BOUTONS ---------- */
/* 44 px standard · 54 px action principale mobile · 36 px en tableau */
.ip-btn {
  font-family: var(--ip-titre);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  min-height: 44px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--ip-radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ip-vite) var(--ip-courbe),
              color var(--ip-vite) var(--ip-courbe);
}
.ip-btn--primaire { background: var(--ip-rouge); color: #fff; }
.ip-btn--primaire:hover { background: var(--ip-marine); color: #fff; }
.ip-btn--primaire:active { background: var(--ip-rouge-hover); }

.ip-btn--secondaire { background: #fff; color: var(--ip-marine); border: 2px solid var(--ip-marine); }
.ip-btn--secondaire:hover { background: var(--ip-marine); color: #fff; }

.ip-btn--fantome {
  font-family: var(--ip-texte);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: transparent;
  color: var(--ip-marine);
}
.ip-btn--fantome:hover { background: var(--ip-gris-100); color: var(--ip-rouge); }

.ip-btn--danger {
  font-family: var(--ip-texte);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  background: #fff;
  color: var(--ip-erreur);
  border: 1px solid #EDBDB9;
}
.ip-btn--danger:hover { background: var(--ip-erreur); color: #fff; border-color: var(--ip-erreur); }

.ip-btn--mobile { font-size: 17px; min-height: 54px; padding: 0 26px; }
.ip-btn--compact {
  font-family: var(--ip-texte);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  min-height: 36px;
  padding: 0 12px;
  background: #fff;
  color: var(--ip-marine);
  border: 1px solid var(--ip-gris-400);
}
.ip-btn:disabled, .ip-btn[aria-disabled="true"] {
  background: var(--ip-gris-200);
  color: var(--ip-gris-500);
  border-color: var(--ip-gris-200);
  cursor: not-allowed;
}

/* ---------- 6. SAISIE ---------- */
.ip-champ-libelle { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.ip-champ {
  width: 100%;
  font-family: inherit;
  font-size: 16px; /* 16 px minimum sur mobile : évite le zoom iOS */
  min-height: 48px;
  padding: 10px 12px;
  background: #fff;
  color: var(--ip-encre);
  border: 1px solid var(--ip-gris-400);
  border-radius: var(--ip-radius-champ);
  transition: border-color var(--ip-vite) var(--ip-courbe);
}
.ip-champ:hover { border-color: var(--ip-gris-500); }
.ip-champ:focus-visible { border-color: var(--ip-marine); outline: 2px solid var(--ip-rouge); outline-offset: 1px; }
.ip-champ[aria-invalid="true"] { border-color: var(--ip-erreur); background: #FFFBFB; }
.ip-champ:disabled { background: var(--ip-gris-100); color: var(--ip-gris-500); cursor: not-allowed; }
/* Chaque champ porte un exemple réel en placeholder et un conseil dessous :
   l'utilisateur ne doit jamais faire face à une page blanche. */
.ip-aide   { font-size: 12.5px; line-height: 1.5; color: var(--ip-gris-600); margin: 6px 0 0; }
.ip-erreur-msg { font-size: 12.5px; line-height: 1.5; color: var(--ip-erreur); font-weight: 600; margin: 6px 0 0; }

/* ---------- 7. STATUTS & BADGES ---------- */
.ip-statut {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 7px;
  display: inline-block;
}
.ip-statut--enligne   { background: var(--ip-succes-fond); color: var(--ip-succes-texte); }
.ip-statut--relecture { background: var(--ip-alerte-fond); color: #8A5709; }
.ip-statut--brouillon { background: var(--ip-gris-200);    color: var(--ip-gris-700); }
.ip-statut--refuse    { background: var(--ip-erreur-fond); color: #9C1B15; }
.ip-statut--programme { background: var(--ip-info-fond);   color: var(--ip-marine); }

.ip-avatar {
  border-radius: 50%; /* seule exception à l'angle droit */
  background: var(--ip-marine);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex: none;
}

/* ---------- 8. CARTES & ARTICLES ---------- */
.ip-carte { background: #fff; border: 1px solid var(--ip-gris-300); }
.ip-carte--survol { transition: border-color var(--ip-vite) var(--ip-courbe), box-shadow var(--ip-vite) var(--ip-courbe); }
.ip-carte--survol:hover { border-color: var(--ip-marine); box-shadow: var(--ip-ombre-1); }

.ip-article { padding: 22px 0; border-bottom: 1px solid var(--ip-gris-300); }
.ip-article--dense { padding: 16px 0; border-bottom: 1px solid var(--ip-gris-200); }

/* ---------- 9. CONTENU SPONSORISÉ (DSA) ----------
   Obligation légale traitée comme un signe éditorial.
   La mention précède TOUJOURS le titre dans l'ordre du DOM,
   n'est jamais masquée au défilement, et figure dans le flux RSS. */
.ip-sponso {
  background: var(--ip-sponso-fond);
  border-left: 3px solid var(--ip-sponso-bord);
  padding: 22px 16px;
}
.ip-sponso-marque {
  font-family: var(--ip-titre);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ip-sponso-texte-2);
  border: 1px solid var(--ip-sponso-bord);
  padding: 2px 7px;
  display: inline-block;
}
.ip-sponso-bandeau { /* haut de page article */
  background: var(--ip-sponso-fond);
  border-top: 3px solid var(--ip-sponso-bord);
  border-bottom: 1px solid var(--ip-sponso-bord-2);
  padding: 11px 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

/* ---------- 10. MESSAGES SYSTÈME ---------- */
/* Un message dit toujours quoi faire ensuite. Jamais « une erreur est survenue ». */
.ip-message { display: flex; gap: 12px; padding: 14px 16px; font-size: 14px; line-height: 1.55; }
.ip-message--succes { background: var(--ip-succes-fond); border-left: 4px solid var(--ip-succes); color: #0C5537; }
.ip-message--alerte { background: var(--ip-alerte-fond); border-left: 4px solid var(--ip-alerte); color: var(--ip-alerte-texte); }
.ip-message--erreur { background: var(--ip-erreur-fond); border-left: 4px solid var(--ip-erreur); color: var(--ip-erreur-texte); }
.ip-message--info   { background: var(--ip-info-fond);   border-left: 4px solid var(--ip-marine); color: var(--ip-marine); }

.ip-toast {
  position: fixed; left: 16px; right: 16px; bottom: 20px; z-index: 90;
  display: flex; justify-content: center; pointer-events: none;
}
.ip-toast > div {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--ip-encre); color: #fff; padding: 13px 16px;
  box-shadow: var(--ip-ombre-2);
  animation: ip-rise var(--ip-entree) var(--ip-courbe);
}

/* ---------- 11. TABLEAUX ---------- */
.ip-table { width: 100%; border-collapse: collapse; }
.ip-table caption {
  text-align: left; padding: 15px 18px;
  font-family: var(--ip-titre); font-size: 19px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--ip-marine);
  background: var(--ip-gris-100); border-bottom: 1px solid var(--ip-gris-300);
}
.ip-table th {
  text-align: left; padding: 11px 16px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ip-gris-600);
  border-bottom: 1px solid var(--ip-gris-300);
}
.ip-table td { padding: 13px 16px; font-size: 14.5px; border-bottom: 1px solid var(--ip-gris-200); }
.ip-table tbody tr:hover { background: var(--ip-gris-50); }
.ip-table .ip-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- 12. PAGINATION ---------- */
.ip-pagination { display: flex; gap: 4px; align-items: center; }
.ip-pagination button {
  font-family: inherit; min-width: 44px; min-height: 44px; font-size: 14px;
  background: #fff; border: 1px solid var(--ip-gris-300); color: var(--ip-marine); cursor: pointer;
}
.ip-pagination button:hover { background: var(--ip-gris-100); }
.ip-pagination button[aria-current="page"] { background: var(--ip-marine); border-color: var(--ip-marine); color: #fff; font-weight: 700; }
.ip-pagination button:disabled { color: var(--ip-gris-500); border-color: var(--ip-gris-200); cursor: not-allowed; }

/* ---------- 13. SQUELETTES DE CHARGEMENT ---------- */
.ip-squelette {
  background: linear-gradient(90deg, var(--ip-gris-200) 0%, var(--ip-gris-50) 40%, var(--ip-gris-200) 80%);
  background-size: 420px 100%;
  animation: ip-shimmer 1.4s linear infinite;
}

/* ---------- 14. ANIMATIONS ---------- */
@keyframes ip-spin    { to { transform: rotate(360deg); } }
@keyframes ip-shimmer { 0% { background-position: -240px 0; } 100% { background-position: 340px 0; } }
@keyframes ip-rise    { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Aucune animation d'apparition au défilement : un journal ne s'anime pas. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- 15. GABARITS ---------- */
.ip-page { max-width: var(--ip-max); margin: 0 auto; padding: 0 var(--ip-gouttiere); }
.ip-lecture { max-width: var(--ip-lecture); }
/* Deux colonnes sans requête média : le flex-wrap fait le travail
   et se replie proprement dès 390 px. */
.ip-deux-colonnes { display: flex; flex-wrap: wrap; gap: 36px; align-items: flex-start; }
.ip-deux-colonnes > .ip-principal { flex: 3 1 520px; min-width: 0; }
.ip-deux-colonnes > .ip-lateral   { flex: 1 1 280px; min-width: 0; max-width: 340px; }
.ip-grille-cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 24px; }

/* Points de rupture de référence : 390 (conception) · 768 · 1080 · 1440 */

/* ---------- 16. IMPRESSION ---------- */
@media print {
  .ip-toast, .ip-pagination, nav[aria-label="Rubriques"] { display: none !important; }
  body { font-size: 11pt; }
  a { color: var(--ip-encre); text-decoration: underline; }
}