/* OFFIL S0 — Dé-Tailwindisation (pixel-perfect mapping) */
/* Scope: S0 only. No external dependencies. */

:root{
  --offil-blue:#0a3a76;
  --offil-red:#e4312d;
  --offil-bg:#f5f7fb;
  --offil-text:#111827;
  --offil-muted:#6b7280;
  --offil-border:#e5e7eb;

  --shadow-card: 0 18px 45px rgba(15, 23, 42, 0.12);
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-icon: 0 1px 2px rgba(15, 23, 42, 0.08);

  --radius-shell: 28px;
  --radius-card: 16px;
  --radius-xl: 12px;

  --max-w: 520px;
}

/* Base */
.offil-app{
  margin:0;
  min-height:100vh;
  background:var(--offil-bg);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  color:var(--offil-text);
}

/* Shell */
.offil-shell{
  width:100%;
  max-width:var(--max-w);
  background:#fff;
  border-radius:var(--radius-shell);
  box-shadow:var(--shadow-card);
  overflow:hidden;
  border:1px solid rgba(15, 23, 42, 0.10);
  display:flex;
  flex-direction:column;
  height:auto;
  max-height:none;
}

/* Header */
.offil-header{
  padding:16px 20px;              /* px-5 py-4 */
  border-bottom:1px solid var(--offil-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:#fff;
  flex:0 0 auto;
}

.offil-header-left{
  display:flex;
  align-items:center;
  gap:12px;                       /* gap-3 */
}

.offil-logo-wrap{ width:96px; }   /* w-24 */

.offil-logo-text{
  font-family:"Oswald", sans-serif;
  font-weight:700;
  font-size:24px;                 /* text-2xl */
  color:var(--offil-blue);
  letter-spacing:0.04em;
  text-transform:uppercase;
}

.offil-pill{
  background:#eff6ff;             /* bg-blue-50 */
  border:1px solid #dbeafe;       /* border-blue-100 */
  color:var(--offil-blue);
  font-size:10px;                 /* text-[10px] */
  font-weight:700;
  padding:4px 12px;               /* px-3 py-1 */
  border-radius:9999px;
  text-transform:uppercase;
  letter-spacing:0.16em;          /* tracking-widest */
}

/* Progress */
.offil-progress{
  padding:12px 20px;              /* px-5 py-3 */
  background:#fff;
  flex:0 0 auto;
}

.offil-progress-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:8px;              /* mb-2 */
  font-size:10px;                 /* text-[10px] */
  text-transform:uppercase;
  letter-spacing:0.16em;          /* tracking-widest */
  font-weight:500;
  color:var(--offil-muted);
}

.offil-progress-left{
  display:flex;
  flex-direction:column;
}

.offil-progress-section{
  color:var(--offil-blue);
  font-weight:700;
}

.offil-progress-sub{ margin-top:2px; } /* mt-0.5 */

.offil-progress-right{ text-align:right; }

.offil-progress-bar{
  width:100%;
  height:6px;                     /* h-1.5 */
  background:#e5e7eb;             /* bg-gray-200 */
  border-radius:9999px;
  overflow:hidden;
}

.offil-progress-fill{
  height:100%;
  width:2%;                       /* w-[2%] */
  background:var(--offil-red);
  border-radius:9999px;
}

/* Main */
.offil-main{
  flex:1 1 auto;
  overflow-y:auto;   /* ⬅️ CLÉ */
  overflow-x:hidden;
  background:var(--offil-bg);
  padding:16px;
}

.offil-card{
  background:#fff;
  border-radius:16px;             /* rounded-2xl */
  padding:24px;                   /* p-6 */
  box-shadow:var(--shadow-sm);
  border:1px solid #f1f5f9;       /* border-slate-100 */
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Badge */
.offil-badge-row{ margin-bottom:16px; } /* mb-4 */

.offil-badge{
  display:inline-block;
  background:#fef2f2;             /* bg-red-50 */
  color:var(--offil-red);
  border:1px solid #fee2e2;       /* border-red-100 */
  padding:4px 12px;               /* px-3 py-1 */
  border-radius:9999px;
  font-size:11px;                 /* text-[11px] */
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.16em;          /* tracking-widest */
}

/* Title + subtitle */
.offil-title{
  font-family:"Oswald", sans-serif;
  font-size:26px;                 /* text-[26px] */
  line-height:1.1;                /* leading-[1.1] */
  font-weight:700;
  color:var(--offil-blue);
  text-transform:uppercase;
  margin:0 0 12px 0;              /* mb-3 */
}

.offil-subtitle{
  font-size:14px;                 /* text-sm */
  color:var(--offil-muted);
  line-height:1.625;              /* leading-relaxed */
  margin:0 0 32px 0;              /* mb-8 */
}

/* --- SECTION BENEFICES CORRIGÉE --- */
.offil-benefit {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  /* PAS de margin-bottom ici pour éviter les conflits */
}

/* LA SOLUTION ROBUSTE :
   Si un bénéfice suit un autre bénéfice (même avec des commentaires HTML entre),
   on ajoute une marge au-dessus. */
.offil-benefit ~ .offil-benefit {
  margin-top: 16px;
}

.offil-benefit--white {
  background: #fff;
}

.offil-benefit--muted {
  background: #f8fafc;
}


/* Icon circles */
.offil-icon-circle{
  width:40px; height:40px;        /* w-10 h-10 */
  border-radius:9999px;
  border:1px solid #e5e7eb;       /* border-slate-200 */
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}

.offil-icon-circle--white{ background:#fff; }
.offil-icon-circle--muted{ background:#f8fafc; color:var(--offil-muted); }
.offil-icon-circle--blue{ color:var(--offil-blue); }
.offil-icon-circle--shadow{ box-shadow: var(--shadow-icon); }

.offil-icon-20{ width:20px; height:20px; }
.offil-icon-16{ width:16px; height:16px; }

/* Benefit text */
.offil-benefit-title{
  font-family:"Oswald", sans-serif;
  font-weight:700;
  color:var(--offil-blue);
  font-size:14px;                 /* text-sm */
  text-transform:uppercase;
  margin:0 0 4px 0;               /* mb-1 */
}

.offil-benefit-desc{
  font-size:14px;                 /* text-xs */
  color:var(--offil-muted);
  line-height:1.625;              /* leading-relaxed */
  margin:0;
}

/* Footer */
.offil-footer{
  background:#fff;
  border-top:1px solid var(--offil-border);
  padding:16px;                   /* p-4 */
  flex:0 0 auto;
}

.offil-footer-note-row{
  display:flex;
  justify-content:center;
  margin-bottom:16px;             /* mb-4 */
}

.offil-footer-note{
  font-size:10px;                 /* text-[10px] */
  color:var(--offil-muted);
  display:flex;
  align-items:center;
  gap:6px;                        /* gap-1.5 */
  font-weight:500;
  margin:0;
}

.offil-status-dot{
  width:6px; height:6px;          /* w-1.5 h-1.5 */
  border-radius:9999px;
  background:#22c55e;             /* bg-green-500 */
  display:inline-block;
}

.offil-footer-actions{
  display:flex;
  align-items:center;
  gap:12px;                       /* gap-3 */
}

/* Buttons */
.offil-btn{
  font-family:"Oswald", sans-serif;
  text-transform:uppercase;
  letter-spacing:0.12em;          /* tracking-wider / widests */
  border-radius:12px;             /* rounded-xl */
  border:1px solid transparent;
  cursor:pointer;
}

.offil-btn:disabled{
  opacity:0.55;
  cursor:not-allowed;
}

/* Ghost (Retour) */
.offil-btn--ghost{
  padding:14px 20px;              /* px-5 py-3.5 */
  font-size:12px;                 /* text-xs */
  font-weight:700;
  color:var(--offil-muted);
  background:transparent;
}

.offil-btn--ghost:not(:disabled):hover{
  background:#f8fafc;             /* hover:bg-slate-50 */
  border-color:#e5e7eb;           /* hover:border-slate-200 */
}

/* Primary (Commencer) */
.offil-btn--primary{
  flex:1 1 auto;
  padding:14px 24px;              /* py-3.5 px-6 */
  font-size:14px;                 /* text-sm */
  font-weight:700;
  letter-spacing:0.16em;          /* tracking-widest */
  background:var(--offil-blue);
  color:#fff;
  box-shadow: 0 10px 25px rgba(8, 47, 97, 0.20); /* close to tailwind shadow + tint */
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}

.offil-btn--primary:hover{
  background:#082f61;             /* hover:bg-[#082f61] */
}

.offil-btn--primary:active{
  transform:scale(0.98);          /* active:scale-[0.98] */
}


/* Logo SVG */
.offil-logo {
  height: 28px;
  width: auto;
  display: block;
}

/* OFFIL — Ajustement taille bouton footer (S0) */
.offil-footer .offil-btn--primary {
  font-size: 0.8em;
}

/* =====================================================
   OFFIL_FORM_RADIO_v1 — COMPOSANT CANONIQUE
   Intégré au socle formulaire OFFIL
   Portée : S1 → S21
===================================================== */

/* ===== GROUPE ===== */
.offil-card fieldset.offil-radio-group {
  display: flex;
  flex-direction: column;
  gap: 14px;

  border: 0;
  padding: 0;
  margin: 0;

  min-inline-size: unset;
}

/* Supprime legend OFFIL */
.offil-card fieldset.offil-radio-group legend {
  display: none;
}

/* ===== OPTION (CARTE) ===== */
.offil-card label.offil-radio {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;

  width: 100%;
  padding: 16px;

  border-radius: 16px;
  border: 1px solid #e3e8ef;
  background: #ffffff;

  cursor: pointer;
}

/* Neutralise héritage */
.offil-card label.offil-radio,
.offil-card label.offil-radio * {
  box-sizing: border-box;
}

/* ===== TEXTE ===== */
.offil-card .offil-radio-text {
  flex: 1;
}

.offil-card .offil-radio-title {
  font-family: Oswald, sans-serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  color: #0b3a6f;
}

.offil-card .offil-radio-desc {
  margin-top: 4px;
  font-size: 14.5px;
  line-height: 1.45;
  color: #4b5563;
}

/* ===== RADIO ===== */
.offil-card input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;

  width: 20px;
  height: 20px;
  border-radius: 50%;

  border: 2px solid #cbd5e1;
  background: #ffffff;

  margin-top: 2px;

  position: relative;
  flex-shrink: 0;
}

.offil-card input[type="radio"]:checked {
  border-color: #0b3a6f;
}

.offil-card input[type="radio"]:checked::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #0b3a6f;
}

/* ===== ÉTAT SÉLECTIONNÉ ===== */
.offil-card label.offil-radio:has(input:checked) {
  background: #f5f9ff;
  border-color: #0b3a6f;
}

/* =====================================================
   OFFIL_FORM_RADIO_v1 — VERROUILLAGE LAYOUT
   Empêche héritage grid / row OFFIL
===================================================== */

.offil-card fieldset.offil-radio-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
}

/* Empêche layout horizontal sur les labels */
.offil-card fieldset.offil-radio-group > label.offil-radio {
  width: 100% !important;
}

/* =====================================================
   OFFIL_FORM_RADIO_v1 — FIX STRUCTURE
===================================================== */

.offil-card .offil-radio-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* =====================================================
   OFFIL_FORM_FIELDS_v1 — S1 → S21 (S2 READY)
   Stable + iOS-safe (sans :has obligatoire)
===================================================== */

.offil-step{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.offil-eyebrow{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.16em;
  color:var(--offil-muted);
  margin:0;
}

.offil-field{
  display:flex;
  flex-direction:column;
  gap:8px;
}

/* OFFIL — Rythme vertical champs (SAFE) */
.offil-field > .offil-horizontal-choices:last-child {
  padding-bottom: 16px;
}

/* =====================================================
   OFFIL — RÈGLE CANONIQUE
   Titres de questions (S1 → S21)
   STRICTEMENT les labels de question
   ===================================================== */



/* Sécurité absolue : texte d’aide */
.offil-help {
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--offil-muted);
}
/* ================================================== */
/* OFFIL — TEXTE D’INTRODUCTION (AVANT QUESTION)       */
/* Version : v1.0                                     */
/* Statut  : Canon                                   */
/* ================================================== */

.offil-intro-text {
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: #4b5563; /* gris OFFIL lisible */
  margin: 0 0 12px 0;
}


/* =====================================================
   OFFIL — TITRES DE QUESTIONS
   S1 → S21
===================================================== */

.offil-question {
  font-family: "Oswald", sans-serif;
  font-weight: 400;
  font-size: 21px;
  line-height: 1.35;
  color: var(--offil-blue);
  text-transform: none;
}



.offil-label{
  font-size:14px;
  font-weight:500;
  color:var(--offil-text);
}

.offil-input,
.offil-select{
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  border:1px solid #e3e8ef;
  font-size:14px;
  font-family:inherit;
  background:#fff;
}

.offil-input:focus,
.offil-select:focus{
  outline:none;
  border-color:var(--offil-blue);
}

/* Texte d’aide */
.offil-help{
  font-size:12px;
  color:var(--offil-muted);
  line-height:1.5;
  margin:0;
}

/* Checkbox “ligne” (pas une carte) */
label.offil-checkbox{
  display:flex;
  gap:10px;
  align-items:flex-start;
  font-size:14px;
  line-height:1.4;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
}

label.offil-checkbox input{
  margin-top:2px;
}

/* =========================================
   OFFIL — Rythme question → réponses
   ========================================= */

/* Marge sous le titre de question */
.offil-question {
  margin-bottom: 10px; /* au lieu du défaut trop large */
}

/* Sécurité : si une radio-list suit directement une question */
.offil-question + .offil-radio-group,
.offil-question + .offil-radio-list,
.offil-question + fieldset {
  margin-top: 0;
}

/* Supprime le surplus au-dessus du groupe radio */
.offil-question + .offil-radio-group,
.offil-question + fieldset {
  margin-top: 0;
}

/* =====================================================
   OFFIL_FORM_RADIO_v1 — S2 variant simple (span)
   Compatible avec ton HTML S2 (input + span)
   iOS-safe : style de sélection via focus-within
===================================================== */

.offil-card .offil-radio-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.offil-card label.offil-radio{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  width:100%;
  padding:16px;
  border-radius:16px;
  border:1px solid #e3e8ef;
  background:#fff;
  cursor:pointer;
}

.offil-card label.offil-radio > span{
  font-family:"Oswald", sans-serif;
  font-size:16px;
  font-weight:500;
  color:var(--offil-blue);
}

/* Radio natif fiable */
.offil-card label.offil-radio input[type="radio"]{
  width:20px;
  height:20px;
  margin:0;
  flex-shrink:0;
  accent-color: var(--offil-blue);
}

/* État visuel sélectionné — iOS safe */
.offil-card label.offil-radio:focus-within{
  background:#f5f9ff;
  border-color:var(--offil-blue);
}

/* =====================================================
   OFFIL_FORM_RADIO_v1 — ADAPTATEUR S2 (input + span)
   Corrige layout + état visuel
===================================================== */

.offil-card label.offil-radio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Texte à gauche */
.offil-card label.offil-radio > span {
  flex: 1;
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--offil-blue);
  text-align: left;
}

/* Radio à droite */
.offil-card label.offil-radio > input[type="radio"] {
  order: 2;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  accent-color: var(--offil-blue);
}

/* État sélectionné — iOS safe */
.offil-card label.offil-radio:focus-within {
  background: #f5f9ff;
  border-color: var(--offil-blue);
}

/* =====================================================
   OFFIL — COMPONENTS (SAFE LAYER)
   Compatible 100% avec offil-s0.css
   AUCUN override des composants S0
   ===================================================== */
/* =====================================================
   OFFIL — CHOIX HORIZONTAUX (TEXTUEL)
   v1.7 — MAX 4 OPTIONS
   Usage : tests / ressentis / arbitrages rapides
===================================================== */

.offil-horizontal-choices{
  display:flex;
  gap:8px;
  margin-top:12px;
}

/* Tuile */
.offil-choice-tile{
  position:relative;
  flex:1;
  border:none;
  border-radius:12px;
  background:#fff;
  cursor:pointer;
  user-select:none;
}

/* Input radio masqué */
.offil-choice-tile input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Texte */
.offil-choice-tile span{
  display:flex;
  align-items:center;        /* centrage vertical */
  justify-content:center;    /* centrage horizontal */

  padding:10px 6px;          /* 🔽 hauteur réduite */
  min-height:44px;           /* ✅ cible tactile mobile */

  font-size:15px;
  font-weight:400;
  line-height:1.15;          /* plus compact */
  color:var(--offil-blue);

  text-align:center;
   background:#ffffff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:12px;




}

/* État sélectionné */
.offil-choice-tile:has(input:checked) span{
  background:var(--offil-blue);
  color:#fff;
  border-radius:12px;
  box-shadow:0 10px 22px rgba(10,58,118,.18);
}

.offil-choice-tile,
.offil-choice-tile *{
  outline:none !important;
  box-shadow:none;
}

.offil-choice-tile:has(input:checked) span{
  box-shadow:0 10px 22px rgba(10,58,118,.18);
}



/* =====================================================
   SEGMENTED RADIO (horizontal)
   Femme / Homme / Autre
   ===================================================== */

.offil-seg {
  display: flex;
  gap: 10px;
  padding: 6px;
  border-radius: 14px;
  background: #e7edf5;
}

.offil-seg__item {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.offil-seg__item input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.offil-seg__item span {
  display: block;
  text-align: center;
  padding: 12px 14px;
  border-radius: 12px;
  font-family: "Oswald", sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #0a3a76;
  background: transparent;
  border: 1px solid transparent;
}

.offil-seg__item:has(input:checked) span {
  background: #ffffff;
  border-color: #cfd8e3;
  box-shadow: 0 2px 6px rgba(15,23,42,.08);
}

/* =========================================
   OFFIL — CHIPS (canon)
   OFFIL_CHIPS_COMPACT_NO_RECT_v1
   Objectif : espacement compact + pas de cadre au clic
   ========================================= */

.offil-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;                /* compact */
}

/* Label = chip */
.offil-chip{
  position:relative;
  cursor:pointer;
}

/* Input caché mais focusable */
.offil-chip input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

/* Visuel chip */
.offil-chip span{
  display:inline-block;
  padding:10px 14px;       /* compact */
  border-radius:999px;
  border:1px solid #d1d5db;
  background:#ffffff;

  font-weight:500;
  font-size:13px;
  line-height:1.2;
  color:#0a3a76;
}

/* Sélection */
.offil-chip input:checked + span{
  background:#0a3a76;
  color:#ffffff;
  border-color:#0a3a76;
}

/* Suppression du rectangle (focus outline) */
.offil-chip input:focus + span,
.offil-chip input:focus-visible + span{
  outline:none !important;
  box-shadow:none !important;
}

/* OFFIL — CHIPS : supprimer le cadre bleu (focus ring) */
.offil-chip{
  -webkit-tap-highlight-color: transparent; /* iOS */
}

.offil-chip:focus,
.offil-chip:focus-visible,
.offil-chip:focus-within{
  outline: none !important;
  box-shadow: none !important;
}

.offil-chip span:focus,
.offil-chip span:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.offil-chip input:focus,
.offil-chip input:focus-visible{
  outline: none !important;
  box-shadow: none !important;
}

.offil-chip input:focus + span,
.offil-chip input:focus-visible + span{
  outline: none !important;
  box-shadow: none !important;
}


/* =====================================================
   SCALE 0–10
   ===================================================== */

.offil-scale {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.offil-scale__item {
  position: relative;
  cursor: pointer;
}

.offil-scale__item input {
  position: absolute;
  opacity: 0;
}

.offil-scale__item span {
  width: 44px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  border: 1px solid #d1d5db;
  background: #ffffff;
  font-weight: 600;
  color: #475569;
}

.offil-scale__item:has(input:checked) span {
  background: #0a3a76;
  color: #ffffff;
  border-color: #0a3a76;
}

/* =====================================================
   ACCESSIBILITÉ
   ===================================================== */

.offil-seg__item:focus-within,
.offil-chip:focus-within,
.offil-scale__item:focus-within {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}
/* Sécurité largeur inputs (évite dépassement carte) */
.offil-input,
.offil-select,
.offil-textarea {
  width: 100%;
  box-sizing: border-box;
}
/* SEGMENTED – version OFFIL stable */
.offil-seg {
  display: flex;
  gap: 8px;
  padding: 6px;
  border-radius: 16px;
  background: #edf2f9;
}

.offil-seg__item {
  flex: 1;
  position: relative;
  cursor: pointer;
}

.offil-seg__item input {
  position: absolute;
  opacity: 0;
}

.offil-seg__item span {
  display: block;
  text-align: center;
  padding: 14px 10px;
  border-radius: 12px;
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--offil-blue);
  background: transparent;
  border: 1px solid transparent;
}

/* Sélection */
.offil-seg__item:has(input:checked) span {
  background: #ffffff;
  border-color: var(--offil-blue);
  box-shadow: 0 4px 12px rgba(10, 58, 118, 0.12);

}

/* =========================================
   S2 — Ajustement rythme typographique
   ========================================= */

.offil-card .offil-title + .offil-subtitle {
  margin-bottom: 16px; /* au lieu de 32px */
}

.offil-card .offil-subtitle + .offil-help {
  margin-top: 0;
}
/* =========================================
   S2 — Rythme texte INTRO (override sûr)
   ========================================= */

.offil-card p.offil-eyebrow {
  margin-bottom: 8px;
}

.offil-card h2.offil-title {
  margin-bottom: 12px;
}

.offil-card p.offil-subtitle {
  margin-bottom: 14px !important;
}

.offil-card p.offil-help {
  margin-top: 0;
}

/* =====================================================
   OFFIL — CHECKBOX / RADIO CARDS (SAFE & CANON)
   Corrige les hors-champs et l’étouffement visuel
===================================================== */

/* Liste verticale maîtrisée */
.offil-choices{
  display:flex;
  flex-direction:column;
  gap:14px; /* légèrement plus respirant */
}

/* S4 uniquement (objectif long) */
.offil-choices--compact{
  gap:8px;
}
/* Card cliquable */
label.offil-choice.offil-choice--card{
  display:flex;
  align-items:center;
  gap:12px;

  width:100%;
  box-sizing:border-box; /* 🔑 clé anti hors-champ */

  padding:12px 12px;     /* ⬅️ réduit horizontalement */
  border-radius:16px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  cursor:pointer;
}

/* Input (checkbox + radio) */
label.offil-choice--card > input{
  width:20px;
  height:20px;
  margin-top:0px;
  flex-shrink:0;
  accent-color: var(--offil-blue);
}

/* Radios : un peu plus d’air que checkbox */
.offil-choice--card input[type="radio"]{
  margin-top:0px;
}

/* Texte */
label.offil-choice--card > span{
  display:block;
  font-size:14px;
  font-weight:500;
  line-height:1.3;
  color:var(--offil-text);
}

/* Hover / focus */
label.offil-choice--card:focus-within{
  background:#f5f9ff;
  border-color:var(--offil-blue);
}

/* Sélection (safe) */
label.offil-choice--card:has(input:checked){
  background:#f5f9ff;
  border-color:var(--offil-blue);
}

/* =========================================
   FIX CRITIQUE — largeur uniforme des cards
   ========================================= */

.offil-choice--card{
  width:100%;
  max-width:100%;
}

.offil-choice--card > span{
  flex:1;              /* 🔑 force l’occupation complète */
  min-width:0;         /* empêche le shrink iOS */
}

/* =====================================================
   OFFIL — TYPO RÉPONSES (CANON) v1.1
   Objectif : même rendu pour réponses (chips / listes / cards)
   - Taille cible : 15px (>= 15px mobile)
   - Poids : 600 (lisible, stable)
   - Interligne : 1.35
   NOTE : à utiliser en supprimant les font-size inline dans les HTML.
===================================================== */

:root{
  --offil-answer-size: 15px;
  --offil-answer-weight: 400;
  --offil-answer-line: 1.35;
}

/* CHIPS (checkbox) */
.offil-chip span{
  font-size: var(--offil-answer-size);
  font-weight: var(--offil-answer-weight);
  line-height: var(--offil-answer-line);
}

/* CHOIX "CARD" (radio/checkbox cards) */
label.offil-choice--card > span{
  font-size: var(--offil-answer-size);
  font-weight: var(--offil-answer-weight);
  line-height: var(--offil-answer-line);
}

/* COMPACT LIST (iOS style) — wrapper requis */
.offil-compactlist .offil-choice > span{
  font-size: var(--offil-answer-size);
  font-weight: var(--offil-answer-weight);
  line-height: var(--offil-answer-line);
}

/* OFFIL — MÉTA QUESTION (contraintes) */
.offil-question .offil-question-meta{
  font-family: "Roboto", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--offil-muted);

  display: inline-block;
  margin-left: 8px;
  white-space: nowrap;
}

}

/* =========================================
   OFFIL — PAGES DE PRÉSENTATION (INTRO)
   OFFIL_PRESENTATION_TYPO_CANON_v1
   ========================================= */

.offil-title{
  font-family: "Oswald", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600; /* Titre moins gras */
  letter-spacing: .3px;
}

.offil-present-subtitle{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 16px;
  font-weight: 300; /* règle demandée */
  color: var(--offil-text);
  margin: 0 0 10px 0;
}

.offil-present-text{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 300; /* règle demandée */
  color: var(--offil-text);
  margin: 0;
}

.offil-present-reminder{
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--offil-muted);
  margin: 0;
}

.offil-present-reminder strong{
  color: var(--offil-red);
  font-weight: 700;
}

/* ========================= */
/* OFFIL — RANGE (Jauge B)   */
/* Source: UI_TEST v1.8      */
/* ========================= */
.offil-range-wrap{
      padding:4px 2px 0 2px;
    }

input[type="range"].offil-range{
      -webkit-appearance:none;
      appearance:none;
      width:100%;
      height:12px;
      border-radius:999px;
      background:#e5e7eb;
      border:1px solid rgba(15,23,42,.08);
      box-shadow:0 1px 2px rgba(15,23,42,.06) inset;
    }

input[type="range"].offil-range::-webkit-slider-thumb{
      -webkit-appearance:none;
      appearance:none;
      width:22px;
      height:22px;
      border-radius:50%;
      background:#fff;
      border:2px solid #0a3a76;
      box-shadow:0 6px 14px rgba(15,23,42,.18);
      cursor:pointer;
    }

input[type="range"].offil-range::-moz-range-thumb{
      width:22px;
      height:22px;
      border-radius:50%;
      background:#fff;
      border:2px solid #0a3a76;
      box-shadow:0 6px 14px rgba(15,23,42,.18);
      cursor:pointer;
    }

input[type="range"].offil-range::-moz-range-track{
      height:12px;
      border-radius:999px;
      background:#e5e7eb;
      border:1px solid rgba(15,23,42,.08);
    }

.offil-range-labels{
      display:flex;
      justify-content:space-between;

/* OFFIL — Espacement standard après réponses */
.offil-choices,
.offil-horizontal-choices {
  margin-bottom: 16px;
}

      margin-top:8px;
      font-size:12px;
      color:#6b7280;
    }

/* =========================================================
   OFFIL — SOCLE FINAL CTA + LIENS (ANTI-UNDERLINE) — v1.0.3
   Scope : S0 → S24 (dans l'app OFFIL uniquement)
   Objectif : neutraliser TOUT style "lien" imposé par WP / thèmes / iOS
   ========================================================= */

.offil-app a,
.offil-app a:link,
.offil-app a:visited,
.offil-app a:hover,
.offil-app a:active,
.offil-app a:focus{
  text-decoration: none !important;
  text-decoration-line: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-tap-highlight-color: transparent;
}

/* Boutons rendus en <a> */
.offil-app a.offil-btn,
.offil-app a.offil-btn--primary,
.offil-app a.offil-btn--ghost{
  text-decoration: none !important;
  text-decoration-line: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Sécurité couleur */
.offil-app a.offil-btn--primary{ color:#ffffff !important; }
.offil-app a.offil-btn--ghost{ color:var(--offil-muted) !important; }

/* =========================================================
   OFFIL — LOGO (fallback) — v1.0.3
   Si un écran utilise <div class="offil-logo"></div>
   ========================================================= */
.offil-logo{
  width:96px;
  height:28px;
  background:url("../assets/logo-offil.png") no-repeat left center;
  background-size:contain;
  display:block;
}

/* Renfort ultime anti-underline (thèmes WP agressifs) */
html body.offil-app a.offil-btn,
html body.offil-app a.offil-btn:link,
html body.offil-app a.offil-btn:visited,
html body.offil-app a.offil-btn:hover,
html body.offil-app a.offil-btn:active,
html body.offil-app a.offil-btn:focus{
  text-decoration: none !important;
  text-decoration-line: none !important;
}

/* ESPACEMENT GLOBAL DES CARDS */
.offil-card {
  margin-bottom: 20px; /* valeur de référence */
}

/* Les groupes de choix ne doivent pas ajouter de respiration verticale */
.offil-choices {
  margin-top: 12px;
  margin-bottom: 0;
  gap: 10px; /* espace entre les choix, pas entre les cards */
}

.offil-choice {
  margin: 0;
}

/* OFFIL FLOW — affichage des écrans (BLOQUANT) */
.offil-screen { display: none; }
.offil-screen.active { display: block; }

/* ======================================================
   OFFIL — FIX GLOBAL FOOTER CTA (CANONIQUE)
   Empêche tout écrasement visuel du bouton primaire
   ====================================================== */

.offil-footer .offil-btn--primary {
  background-color: #0a3a76;
  color: #ffffff;
  opacity: 1;
}

/* Sécurité : même si un disabled existe par erreur */
.offil-footer .offil-btn--primary[disabled],
.offil-footer .offil-btn--primary.is-disabled {
  background-color: #0a3a76;
  color: #ffffff;
  opacity: 1;
}
/* ======================================================
   OFFIL — FIX GLOBAL CTA RETOUR (GHOST)
   Assure lisibilité et contraste en footer
   ====================================================== */

.offil-footer .offil-btn--ghost {
  color: #0a3a76;
  opacity: 1;
}

/* Sécurité : aucun état ne doit l'affadir */
.offil-footer .offil-btn--ghost[disabled],
.offil-footer .offil-btn--ghost.is-disabled {
  color: #0a3a76;
  opacity: 1;
}

/* ======================================================
   OFFIL — FIX ROBUSTE CTA RETOUR (GHOST) — FOOTER
   Objectif : empêcher tout gris/opacity/filter en S21+
   ====================================================== */

/* 1) Force la couleur sur le bouton et tous ses enfants */
.offil-footer .offil-footer-actions .offil-btn--ghost,
.offil-footer .offil-footer-actions .offil-btn--ghost * {
  color: #0a3a76 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 2) Si une icône SVG est utilisée (stroke/fill) */
.offil-footer .offil-footer-actions .offil-btn--ghost svg,
.offil-footer .offil-footer-actions .offil-btn--ghost svg * {
  fill: #0a3a76 !important;
  stroke: #0a3a76 !important;
  opacity: 1 !important;
  filter: none !important;
}

/* 3) Neutralise un éventuel "disabled look" global (même si le bouton n'est pas disabled) */
.offil-footer .offil-footer-actions .offil-btn--ghost[disabled],
.offil-footer .offil-footer-actions .offil-btn--ghost.is-disabled {
  color: #0a3a76 !important;
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* 4) Cas fréquent : un parent applique une opacité */
.offil-footer,
.offil-footer .offil-footer-actions {
  opacity: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
}

/* ======================================================
   OFFIL — FIX TYPOGRAPHIE CTA FOOTER (CANONIQUE)
   Empêche tout écrasement de police par les scopes Sxx
   ====================================================== */

.offil-footer .offil-btn {
  font-family: 'Oswald', sans-serif !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

.offil-benefit-note {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 12px;
  padding: 10px 12px;

  background: transparent;
  border-left: 3px solid rgba(10, 58, 118, 0.35);

  border-radius: 0 6px 6px 0;
  color: var(--offil-blue);
  font-size: 14px;
  line-height: 1.4;
}





.offil-benefit-note svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.offil-pause-card {
  background: #f6f9fc;
  border-radius: 14px;
  padding: 20px 18px;
  text-align: center;
}

.offil-pause-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  border-radius: 50%;
  background: #0a3a76;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offil-pause-title {
  font-family: 'Oswald', sans-serif;
  font-size: 22px;
  margin-bottom: 6px;
  color: #0a3a76;
}

.offil-pause-text {
  font-size: 14px;
  margin-bottom: 6px;
  color: #64748b;
}

.offil-pause-text--highlight {
  color: #0a3a76;
}

.offil-pause-progress {
  margin-top: 14px;
}

.offil-pause-progress-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 6px;
  overflow: hidden;
}

.offil-pause-progress-fill {
  height: 100%;
  background: #0a3a76;
  border-radius: 6px;
}

.offil-pause-progress-label {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: #64748b;
}

.offil-card--pause-mid {
  background: linear-gradient(
    180deg,
    rgba(10,58,118,0.05),
    rgba(10,58,118,0.015)
  );
  border: 1px solid rgba(10,58,118,0.15);
}