/* OFFIL — S21 — Patch UI — 3 colonnes (v1.0) */

.offil-3col-grid{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
}

.offil-3col-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:12px;
}

/* Titre centré, Oswald, bleu OFFIL */
.offil-3col-title{
  margin:0;
  font-family:'Oswald', sans-serif;
  font-weight:500;
  font-size:16px;
  line-height:1.25;
  color:#0a3a76;
}

/* Mobile : tu m’as demandé 3 colonnes => on reste en 3 colonnes (pas de stack) */
@media (max-width:430px){
  .offil-3col-grid{
    gap:12px;
  }
  .offil-3col-title{
    font-size:15px;
  }
}
/* OFFIL — S21 — Patch UI — 3 colonnes (v1.1) */

/* Grille 3 colonnes */
.offil-3col-grid{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
}

/* Colonnes */
.offil-3col-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  position:relative;
}

/* Séparateur vertical (sauf dernière colonne) */
.offil-3col-item:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-8px;
  top:10%;
  height:80%;
  width:1px;
  background-color:rgba(10,58,118,0.12); /* bleu OFFIL très léger */
}

/* Icônes réduites ~10 % */
.offil-3col-item .offil-icon-20{
  transform:scale(0.9);
}

/* Titres réduits ~15 % */
.offil-3col-title{
  margin:0;
  font-family:'Oswald', sans-serif;
  font-weight:500;
  font-size:14px;      /* ↓ depuis 16px */
  line-height:1.2;
  color:#0a3a76;
}

/* Mobile : on garde 3 colonnes, séparateurs plus courts */
@media (max-width:430px){
  .offil-3col-grid{
    gap:12px;
  }

  .offil-3col-item:not(:last-child)::after{
    height:70%;
    top:15%;
  }

  .offil-3col-title{
    font-size:13px;
  }
}

/* OFFIL — S21 inline info (v1.1) */

.offil-s21-inline-info{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:24px 0 32px;
}

.offil-s21-inline-col{
  flex:1;
  text-align:center;
}

.offil-s21-inline-title{
  font-family: Oswald, sans-serif;
  font-size: 0.90em; /* -15 % */
  line-height: 1.35;
  font-weight: 500;
  color: var(--offil-blue);
}

.offil-s21-inline-sep{
  width:1px;
  height:42px;
  background: rgba(10,58,118,0.18);
}
/* OFFIL — Ajustement fin titre / meta (v1.2.1) */

/* Titre de question */
.offil-question{
  margin-bottom:2px;   /* ↓ réduit l’espace sous le titre */
}

/* Meta contrainte */
.offil-question-meta{
  display:block;
  margin-top:0;        /* collé au titre */
  margin-bottom:16px;  /* espace AVANT les questions */
  font-family:"Oswald", sans-serif;
  font-size:11px;
  font-weight:400;
  color:var(--offil-blue);
  line-height:1.1;
}

.offil-divider {
  margin: 24px 0;
  height: 1px;
  background: #e5e9f0;
  width: 100%;
}

/* OFFIL — S21 — Espacement lecture narrative */
.offil-s21-flow .offil-card {
  margin-bottom: 18px;
}

.offil-s21-flow .offil-card:last-child {
  margin-bottom: 0;
}

/* =========================================================
   OFFIL — S21 — Flow + hiérarchie + micro-patterns lecture
   ========================================================= */

.offil-s21-flow .offil-card{ margin-bottom: 18px; }
.offil-s21-flow .offil-card:last-child{ margin-bottom: 0; }

.offil-s21-flow .offil-title{
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: .3px;
  margin-bottom: 10px;
}

.offil-s21-flow .offil-title-icon{
  font-size: 18px;
  margin-right: 8px;
  opacity: .85;
}

/* Statut visuel léger “analyse” */
.offil-s21-flow .offil-card--analysis{
  border-left: 4px solid rgba(10,58,118,.35);
}

/* Micro-pattern : ligne “boucle” (sans ajout de sens) */
.offil-s21-flow .offil-s21-loop{
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(10,58,118,.12);
  font-weight: 500;
}

/* Liste neutre */
.offil-s21-flow .offil-s21-list{
  margin: 10px 0 12px 18px;
}
.offil-s21-flow .offil-s21-list li{
  margin-bottom: 6px;
}

/* Note neutre (cadre) */
.offil-s21-flow .offil-s21-note{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid rgba(10,58,118,.12);
}

/* Bloc verrouillé (S21.10) : distinct mais neutre */
.offil-s21-flow .offil-card--locked{
  background: #fff7f7;
  border: 1px solid rgba(204, 0, 0, .18);
  border-left: 4px solid rgba(204, 0, 0, .35);
}

/* Badge verrou (mention obligatoire) */
.offil-s21-flow .offil-s21-lock-badge{
  display: inline-block;
  margin: 6px 0 10px 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 13px;
  background: rgba(204,0,0,.08);
  border: 1px solid rgba(204,0,0,.18);
}

/* =========================================================
   OFFIL — PATCH UX S21 v1.1 (VALIDÉ MGPT)
   Scope : S21-1 → S21-6
   Objectif : lisibilité mobile / respiration / neutralité
   ========================================================= */

/* --- Texte : respiration globale --- */
.offil-s21-flow .offil-text-bloc p{
  margin-bottom: 16px;
  line-height: 1.6;
}

/* Éviter l’effet “mur de texte” */
.offil-s21-flow .offil-text-bloc p:last-child{
  margin-bottom: 0;
}

/* --- Cartes S21 : séparation claire entre sections --- */
.offil-s21-flow .offil-card{
  margin-bottom: 24px;
}

/* --- Cartes d’options S21.11 : homogénéité stricte --- */
.offil-s21-flow .offil-s21-option{
  margin-bottom: 28px;
  padding: 16px;
  border-radius: 16px;
}

/* Titre d’option : lisible mais non dominant */
.offil-s21-flow .offil-s21-option-title{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
}

/* Icônes illustratives : discrètes */
.offil-s21-flow .offil-s21-option-icon{
  opacity: .85;
}

/* --- Cadres méthodologiques / verrouillés : respiration --- */
.offil-s21-flow .offil-card--frame,
.offil-s21-flow .offil-card--locked{
  padding: 16px;
}

/* Badge / mention obligatoire : espace avant/après */
.offil-s21-flow .offil-s21-lock-badge{
  margin: 12px 0 16px 0;
}

/* --- Séparateurs doux implicites (sans hiérarchie) --- */
.offil-s21-flow .offil-card--analysis{
  padding-top: 16px;
}
/* S21.10 — Zone de réflexion illustrative (verrouillée) */
.offil-card--locked{
  background: linear-gradient(
    180deg,
    #fff7f7 0%,
    #ffffff 100%
  );
  border: 1px dashed rgba(204, 0, 0, .35);
  border-left: 6px solid rgba(204, 0, 0, .45);
}

.offil-s21-list{
  list-style: none;
  padding-left: 0;
}

.offil-s21-list li{
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-style: italic;
  color: #334155;
}

.offil-s21-list li::before{
  content: "•";
  position: absolute;
  left: 8px;
  color: rgba(204,0,0,.6);
}
.offil-s21-option-title{
  font-size: 17px;
  line-height: 1.25;
}

.offil-s21-option-icon{
  font-size: 20px;
}
.offil-s21-option:nth-of-type(even){
  background: #ffffff;
}

.offil-s21-option:nth-of-type(odd){
  background: #f9fafb;
}

.offil-s21-option .offil-text-bloc{
  color: #334155;
  font-size: 15px;
}

.offil-s21-option .offil-text-bloc p{
  margin-bottom: 14px;
}

.offil-s21-option-role{
  margin: 8px 0 12px 0;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  background: rgba(10,58,118,.06);
  color: #0a3a76;
  display: inline-block;
}

/* TEXTE S21 — cohérence globale */
.offil-s21-flow .offil-text-bloc{
  font-size: 15px;
  line-height: 1.55;
  color: #1f2937;
}

/* INTRO DOUCE */
.offil-card--soft{
  background: #ffffff;
  border: 1px solid #e5e7eb;
}

/* ESPACE FINAL AVANT FOOTER (IMPORTANT) */
.offil-main{
  padding-bottom: 48px;
}

/* CARDS DE RÉFLEXION */
.offil-benefit{
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 18px;
  margin-bottom: 24px;
}

/* FOOTER */
.offil-footer{
  padding: 16px 0 24px 0;
}

.offil-footer-note{
  font-size: 13px;
  color: #6b7280;
  text-align: center;
}

/* SOFT BLOCKS — S21-6 */
.offil-soft-block{
  display: flex;
  gap: 12px;
  padding: 16px;
  margin-bottom: 16px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
}

.offil-soft-icon{
  font-size: 18px;
  color: #0a3a76;
  line-height: 1.2;
}

.offil-soft-block h3{
  font-size: 16px;
  margin-bottom: 4px;
}

.offil-soft-block p{
  font-size: 14px;
  color: #374151;
  line-height: 1.45;
}

/* Espace final avant footer */
.offil-main{
  padding-bottom: 48px;
}

/* GROUPE ACCORDÉONS */
.offil-accordion-group{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ACCORDÉON */
.offil-accordion{
  border: 1px solid #dbe2ea;
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

/* HEADER */
.offil-accordion summary{
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  cursor: pointer;
}

.offil-accordion summary::-webkit-details-marker{
  display: none;
}

/* INDEX */
.offil-accordion-index{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #0a3a76;
  color: #ffffff;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* TITLE */
.offil-accordion-title{
  font-size: 15px;
  font-weight: 600;
  color: #0a3a76;
  flex: 1;
}

/* ICON */
.offil-accordion-icon::after{
  content: "⌄";
  font-size: 18px;
  color: #0a3a76;
}

.offil-accordion[open] .offil-accordion-icon::after{
  content: "⌃";
}

/* CONTENT */
.offil-accordion-content{
  padding: 0 16px 16px 56px;
  font-size: 14px;
  color: #374151;
}


.offil-main{
  padding-bottom: 64px; /* plus généreux avec accordéons ouverts */
}

.offil-help-text{
  font-size: 14px;
  color: #6b7280;
  margin: 8px 4px 16px 4px;
}

/* ESPACE ENTRE DERNIER ACCORDÉON ET RAPPEL DE CADRE — OFFIL */
.offil-accordion-group + .offil-card--frame{
  margin-top: 24px;
}
.offil-footer-note-row{
  display: flex;
  justify-content: center;
  padding-bottom: 8px;
}

.offil-footer-note{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  text-align: center;
}
/* ALERT OFFIL — POINT DE VIGILANCE */
.offil-alert{
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
}

/* Variante INFO (bleu OFFIL) */
.offil-alert--info{
  background: rgba(10, 58, 118, 0.06); /* bleu OFFIL très léger */
  border: 1px solid rgba(10, 58, 118, 0.25);
}

.offil-alert-icon{
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0a3a76;
  color: #ffffff;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offil-alert-title{
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #0a3a76;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.offil-alert-text{
  color: #1f2937;
}

/* ACCORDÉONS S21 — TITRES */
.offil-accordion-title{
  font-family: 'Oswald', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: var(--offil-blue);
  line-height: 1.3;
  text-transform: uppercase;
}

/* BLOC INFO OFFIL — RAPPEL DE CADRE */
.offil-info-block{
  display: flex;
  gap: 14px;
  padding: 16px;
  margin-top: 24px;
  margin-bottom: 32px; /* IMPORTANT : espace avant footer */
  background: #f6f9fc;
  border-radius: 16px;
  border: 1px solid #dbe4f0;
}

/* Icône */
.offil-info-icon{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(10, 58, 118, 0.1);
  color: var(--offil-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  font-family: 'Oswald', sans-serif;
}

/* Contenu */
.offil-info-content{
  flex: 1;
}

.offil-info-title{
  font-family: 'Oswald', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--offil-blue);
  text-transform: uppercase;
  margin-bottom: 6px;
}
/* Micro-help OFFIL (S21) — explication neutre */
.offil-s21-helper{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  border-radius:14px;
  background:#f6f9fc;
  border:1px solid #dbe4f0;
  margin:12px 0 14px; /* espace avant la liste */
}

.offil-s21-helper-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(10, 58, 118, 0.10);
  color: var(--offil-blue);
  flex-shrink:0;
  font-size:16px;
}

.offil-s21-helper-text{
  font-size:14px;
  line-height:1.55;
  color:#1a2233;
}

.offil-s21-helper-text strong{
  font-weight:600;
}

/* Aide à la lecture — S21.10 (UX neutre, non prescriptive) */
.offil-s21-helper{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:12px 14px;
  margin:12px 0 16px;
  border-radius:14px;
  background:#f6f9fc;
  border:1px solid #dbe4f0;
}

.offil-s21-helper-icon{
  width:30px;
  height:30px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(10,58,118,0.12);
  color:var(--offil-blue);
  font-size:16px;
  flex-shrink:0;
}

.offil-s21-helper-text{
  font-size:14px;
  line-height:1.55;
  color:#1a2233;
}

.offil-s21-helper-text strong{
  font-weight:600;
}

/* ================================
   OFFIL — S21 UX PATCH (MGPT)
   Scope: S21 only
   ================================ */

.offil-s21-flow .offil-text-bloc p {
  line-height: 1.6;
  margin-block: 12px;
}

.offil-s21-flow .offil-s21-list {
  margin-block: 14px;
  padding-left: 20px;
}

.offil-s21-flow .offil-s21-list li {
  margin-bottom: 10px;
  line-height: 1.55;
}

/* Harmonisation des blocs repères */
.offil-s21-flow .offil-card--muted,
.offil-s21-flow .offil-s21-context,
.offil-s21-flow .offil-s21-helper {
  padding: 14px 16px;
  margin-block: 16px;
  border-radius: 8px;
}

/* Focus visible accessibilité */
.offil-s21-flow button:focus-visible,
.offil-s21-flow a:focus-visible,
.offil-s21-flow summary:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Réserve de sécurité pour le footer sticky */
.offil-footer-spacer {
  height: 80px;
}