/* *{box-sizing:border-box}body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;background:#f6f7fb}
.container{max-width:720px;margin:0 auto;padding:16px}
header h1{margin:0 0 4px 0}
.card{background:#fff;padding:16px;margin:12px 0;border-radius:16px;box-shadow:0 2px 8px rgba(0,0,0,.06)}
label{display:block;margin:8px 0}
input,select,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid #ddd}
button{padding:10px 14px;border:0;border-radius:12px;cursor:pointer}
button:hover{filter:brightness(0.95)}
h2{margin-top:0}
.muted{color:#666;font-size:14px}
.section-title{margin:12px 0 6px;font-weight:600}
.item{display:flex;align-items:center;gap:8px;margin:8px 0}
.item input[type=checkbox]{transform:scale(1.2)}


   label { font-size: 14px; color:#444; }
  input, select, button, textarea { padding:10px; border:1px solid #ccc; border-radius:8px; }
  button { cursor:pointer }
  #sessions { width:100%; border-collapse:collapse; margin-top:12px }
  #sessions th, #sessions td { border:1px solid #ddd; padding:8px; }
  #log { white-space:pre-wrap; background:#f7f7f7; padding:10px; border-radius:8px; max-height:180px; overflow:auto; }
  .muted { color:#666; font-size: 13px; }
*/

  body { font: 16px/1.4 system-ui, -apple-system, Segoe UI, Roboto, sans-serif; margin: 24px; }
  
 /*  #sessions { width:auto; border-collapse:collapse; margin-top:12px; font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;  }
  #sessions th { padding:0px; }
  #sessions td { border-bottom:3px solid #F6F7FB; padding:8px;  }
  #sessions thead {display:none;}
  .session_id { color:#666; font-size:smaller;display: none;}
  #sessions th.actions-col { }
  #sessions td.lestitres { background-color:#F67A3C; color: white; text-transform: uppercase;}
  #sessions td.lesdates {background-color:#004F50; color:white;}
  #sessions td.lesactions {background-color:transparent;} */
  
  
  /* Table sessions */
#sessions {
  width: auto;
  border-collapse: separate;
  border-spacing: 0 8px; /* espace entre lignes */
  font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;
}

#sessions thead {
  display: none; /* masque l’entête */
}

#sessions tbody tr {
  background: #fff;
  border-radius: 12px;
 /* box-shadow: 0 4px 12px rgba(0,0,0,0.06); */
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease;
}
#sessions tbody tr:hover {
/*  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.08); */
}

#sessions td {
  /* padding: 14px 16px; */
  vertical-align: middle;
  border: none;
}


#sessions .lestitres {
  border-top-left-radius: 12px;   /* coin haut gauche */
border-bottom-left-radius: 12px; /* coin bas gauche */
border-top-right-radius: 0;    /* coin haut droit */
border-bottom-right-radius: 0; /* coin bas droit */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}

#sessions .lestitres:hover {
  transform: translateY(-2px);
 box-shadow: 0 4px 12px rgb(6 7 40 / 82%);
}

/* Colonne titre */
#sessions .lestitres button.title-btn {
  border: none;
  font-weight: 600;
  font-size: 16px;
  color: #1f2937; 
  cursor: pointer;
  text-align: left;
  text-transform:uppercase;
  width: 100%;
}


/* Colonne date */
#sessions .lesdates {
  font-size: 14px;
  color: #6b7280; /* gris neutre */
  text-align: right;
  white-space: nowrap;
  border-top-left-radius: 0;   /* coin haut gauche */
border-bottom-left-radius: 0; /* coin bas gauche */
border-top-right-radius: 12px;    /* coin haut droit */
border-bottom-right-radius: 12px; /* coin bas droit */
  box-shadow: 0 6px 16px rgba(0,0,0,0.08);
}



/* Colonne actions */
#sessions .lesactions {
  text-align: right;
  white-space: nowrap;
  padding-left:7px;
}

 #sessions td.lestitres { background-color:#F67A3C; color: white; text-transform: uppercase;}
  #sessions td.lesdates {background-color:#004F50; color:white;}
  #sessions td.lesactions {background-color:transparent;} 
  
/* #sessions .lesactions button {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6; 
  color: #374151;
  cursor: pointer;
  transition: background .2s, color .2s;
}
#sessions .lesactions button:hover {
  background: #e5e7eb;
} */ 

#sessions .btn-rename:hover {
  color: #0FA3B1; /*  vert */
}

#sessions .btn-delete:hover {
  color: #dc2626; /* rouge suppression */
} 
  
  #login-form { text-align:center;  background: var(--brand);
  color: #fff;
  font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif;
  border:1px solid #666;
  }
  #login-form h2 { color: #F67A3C;}
  
  #login-form input#license, #login-form input#slug {
    width: 330px;
    text-align: center!important;
    border: solid 2px #F67A3C!important;
    }
 #seco {
  background: transparent;          /* vert émeraude Tailwind */
  color: #fff;                  /* texte blanc */
  font-weight: 600;
  padding: 10px 20px;
  border: solid;
  border-radius: 12px;           /* arrondi doux */
  cursor: pointer;
  transition: background 0.25s, transform 0.15s, box-shadow 0.25s;
  box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

#seco:hover {
  background: #73aa98;          /* vert plus foncé au hover */
  transform: translateY(-1px);  /* petit “lift” */
  box-shadow: 0 6px 14px rgba(0,0,0,0.2);
}

#seco:active {
  transform: translateY(0);     /* revient en place au clic */
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}
  
  #pasdecompte {
    margin:15px;text-align: center; flex-wrap: nowrap; align-content: center;align-items: center;}

#sessionsPanel table {
    text-align: center !important;
    margin: auto !important;
    padding-top:30px;
    }
/* 
.save-status { font-size:1rem; opacity:.8; background-color:#F67A3B;color:white; text-align:center; width: 150px;margin-top:12px;}
.save-status.is-saving { opacity:1 }
.save-status.is-ok { color: #2e7d32 }  
.save-status.is-err { color: #c62828 }   
.banner { padding:.6rem .8rem; border-radius:8px; margin:.5rem 0; text-align:center; width: 250px;margin-top:12px; }
.banner.info { background:#e3f2fd; color:#0d47a1 }
.banner.ok   { background:#e8f5e9; color:#1b5e20 }
.banner.err  { background:#ffebee; color:#b71c1c }
 */
 
 #introdoc {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  padding: 20px;
  border-left: 6px solid #F67A3C; /* accent orange Checkéop */
  transition: transform .2s ease, box-shadow .2s ease;
  margin:10px;
}
#introdoc:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

#introdoc h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2937; /* texte foncé */
  margin: 0 0 8px;
}

#introdoc p {
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
  margin: 0;
}

#introdoc img {
  max-width: 100%;
  border-radius: 12px;
  border: 1px solid #e5e7eb; /* gris clair */
}
@media (min-width: 768px) {
  #introdoc {
    flex-direction: row;
    align-items: center;
  }
  #introdoc img {
    max-width: 240px;
    flex-shrink: 0;
  }
  #introdoc .text {
    flex: 1;
    padding-left: 20px;
  }
}
 
 
 /* Remplace tout ton bloc par ceci */
#app-status {
  position: fixed !important;
  top: 135px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  max-width: min(92vw, 520px);
  box-sizing: border-box;
  padding: 10px 14px;
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(0,0,0,.2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 500 14px/1.25 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #0b1220;
  background: #fff;
  z-index: 2147483647; /* au-dessus de tout, au cas où */
  opacity: 0;   
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}
#app-status[data-visible="1"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}


#app-status .st-spinner, #app-status .st-check, #app-status .st-cross { display:none; width:18px; height:18px; }
#app-status .st-path { stroke: currentColor; stroke-linecap: round; opacity:.9; animation: st-dash 1.4s ease-in-out infinite; }
@keyframes st-dash { 0%{stroke-dasharray:1,150;stroke-dashoffset:0} 50%{stroke-dasharray:90,150;stroke-dashoffset:-35} 100%{stroke-dasharray:90,150;stroke-dashoffset:-124} }
#app-status[data-state="saving"] .st-spinner{display:block;color:#2563eb}
#app-status[data-state="ready"]  .st-check{display:block;color:#16a34a}
#app-status[data-state="error"]  .st-cross{display:block;color:#dc2626}
#app-status[data-state="saving"]{background:#eef2ff;color:#1e40af}
#app-status[data-state="ready"] {background:#ecfdf5;color:#065f46}
#app-status[data-state="error"] {background:#fef2f2;color:#7f1d1d}
@keyframes st-shake{0%,100%{transform:translateX(-50%)}20%{transform:translateX(calc(-50% - 4px))}40%{transform:translateX(calc(-50% + 3px))}60%{transform:translateX(calc(-50% - 2px))}80%{transform:translateX(calc(-50% + 1px))}}
#app-status[data-state="error"][data-visible="1"]{animation:st-shake .32s linear 1}



/* Utilitaire "hidden" si tu l'utilises déjà */
.hidden { display: none !important; }

/* Fade générique */
.fade {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, visibility .25s linear; 
}
.fade.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Le conteneur infos n’est plus vraiment utile au centrage */
#infos {
  width: 100%;
}

#dateField {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  color: var(--text);
  background-color: var(--card-bg);
  border: 2px solid #e0e0e0;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-appearance: none; /* iOS */
  -moz-appearance: none;    /* Firefox */
  appearance: none;
  cursor: pointer;
  text-align:center;
}

/* quand une date est sélectionnée */
#dateField:valid {
  border-color: var(--brand);
  background-color: #f0fcfa;
  color: var(--brand-ink);
  font-weight: 500;
}

/* focus clair */
#dateField:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(246, 122, 59, .25);
}

/* Accessibilité : pas d'anim pour les personnes qui préfèrent réduire */
@media (prefers-reduced-motion: reduce) {
  .fade { transition: none; }
}


div#footer { 	font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif; font-size: smaller;  background-color: #043636;
 padding: 15px 0 5px; text-align: center; color: #b5abab; padding-bottom: 10px; width: 100%; }
div#footer a { color: #b5abab; }

h1 {
	color:#F67A3B;
	text-align:center;
}

.logo-wrapper {
  text-align: center;
  padding-top: 10px;
}
.logo-wrapper h1 {
  margin: 0; /* évite un gros espace supplémentaire */
}

.form-intro.card { margin-bottom:1.2rem; }
.intro-grid { display:grid; grid-template-columns: 1fr 360px; gap: 16px; align-items:start; }
@media (max-width: 800px) { .intro-grid { grid-template-columns: 1fr; } }
.section.card { margin-top: 16px; padding: 14px; }
.section-header { margin-bottom: 8px; text-align:center;}
.section-header h3 { 
    color: var(--accent);text-transform: uppercase;
	font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;
	font-size: x-large;
}
.section-header div.section-description { 
	color: var(--brand-2);
    font-weight: 600;
    letter-spacing: 1px;
}

.item.row { display:grid; grid-template-columns: 24px 1fr; align-items:start; gap: 10px; padding: 8px 0; border-top: 1px solid #eee; }


/* .item.row.text { grid-template-columns: 200px 1fr; } */
.item.row:first-child { border-top: 0; }


.item.row.text {
  display: flex;
  flex-direction: column; /* label au-dessus, champ en dessous */
  align-items: stretch;
  gap: 8px;
  padding: 8px 0;
}

.item.row.text label {
  font-weight: 600;
  color: var(--muted) !important;
  margin-bottom: 4px;
  letter-spacing: 0px !important;
  font-style: italic;
}

/* .item.row.text */
textarea {
  width: 100%;
  min-height: 3em; /* ~3 lignes */
  resize: vertical; /* optionnel : autorise l’agrandissement manuel */
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--muted);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}

.item.row.text.stacked {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.item.row.text.stacked textarea {
  resize: vertical; /* optionnel */
}

.footer.card { margin-top: 20px; opacity: .8; color: var(--muted); text-align: center;}

.intro-media img {
max-width:50%;
}

/* #welcome, #form, #journal, #list, #actions {
  display: none; 
} */

div#welcome {
	background-color: #F67A3B;
}

div#welcome {
	background-color: #F67A3B;
}

#welcome p, #welcome label  {
	font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;
}

#welcome h2  {
    color: #F67A3B!important;
	font-family: 'Nunito Sans', Helvetica, Arial, Lucida, sans-serif;
    font-size: xxx-large;
    text-transform: uppercase;
}
#form.card label, .form-intro.card h2 {
    color: var(--text);
    font-weight: 400;
    letter-spacing: 1px;
}

#form.card{
  background: var(--brand);
  color: #fff;
  font-family: "Nunito Sans", Helvetica, Arial, Lucida, sans-serif;
}


.section { 
  color:#777;
 }
 
 h3.section-title { 
  color:var(--orange);
 }

/* ===== Variables & reset doux ===== */
:root{
  --bg: #f6f7fb;
  --card-bg: #ffffff;
  --brand: #004E4E;        /* ta couleur principale */
  --brand-2: #0FA3B1;      /* variante accent éventuelle */
  --text: #1f2937;
  --muted: #6b7280;
  --orange:#F67A3B;
  --radius: 16px;
  --space: 16px;
  --shadow: 0 2px 8px rgba(0,0,0,.06);
}

*{ box-sizing: border-box; }
html, body{ height:100%; }
html{ scroll-behavior: smooth; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  /* Taille fluide : confortable mobile → desktop */
  font-size: clamp(16px, 1.2vw + 12px, 18px);
  line-height: 1.5;
}

/* ===== Layout ===== */
.container{
  max-width: 820px;
  margin-inline: auto;
  padding: clamp(12px, 2vw, 24px);
}

// .row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
#actions div.row {
	text-align: center;
}

#auth  {
	text-align:center;
}

.card, #auth {
  background: var(--card-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(14px, 2.5vw, 24px);
  margin: clamp(10px, 1.8vw, 16px) 0;
}

sections#auth, sections#actions, sections#list, sections#journal { margin: 30px; background.color:white;}
section#list { text-align: -webkit-center; margin-left: 10px; }



/* Bottom sheet pour renommer le titre de la session 
.rn-sheet {position: fixed; inset:0; display:none; z-index: 9999;}
.rn-sheet[aria-hidden="false"] {display:block;}
.rn-backdrop {position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(2px);}
.rn-panel {position:absolute; left:0; right:0; bottom:0; background:#fff; border-radius:16px 16px 0 0;
  box-shadow: 0 -8px 24px rgba(0,0,0,.2); padding:16px; max-height:80dvh; translate:0 100%; transition: translate .2s ease;}
.rn-sheet[aria-hidden="false"] .rn-panel {translate:0 0;}

.rn-header {display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.rn-header h2 {font-size:1.1rem; margin:0;}
.rn-x {background:none; border:none; font-size:1.25rem; line-height:1; padding:6px;}

.rn-label {display:block; font-weight:600; margin:8px 0 6px;}
#rename-input {width:100%; font-size:1.05rem; padding:14px 12px; border:2px solid #e6e6e6; border-radius:12px;
  outline:none;}
#rename-input:focus {border-color:#004F50; box-shadow: 0 0 0 3px rgba(0,79,80,.15);}
.rn-help {font-size:.85rem; color:#666; margin:6px 2px 14px;}

.rn-actions {display:flex; gap:10px; justify-content:flex-end;} */

.rn-header {align-items:center; justify-content:space-between; margin-bottom:8px;}

.btn {flex:0 0 auto; padding:12px 16px; border-radius:12px; border:2px solid transparent; font-weight:600;}
.btn.primary {background:#004F50; color:#fff;}
.btn.ghost {background:#fff; border-color:#ddd; color:#333;}


.rn-sheet { position: fixed; inset: 0; z-index: 1000; display: grid; grid-template-rows: 1fr auto; pointer-events: none; }
.rn-sheet[aria-hidden="true"] { display: none; }
.rn-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.35); opacity: 0; transition: opacity .2s; }
.rn-panel { margin: 0; background: #fff; border-radius: 24px 24px 0 0; padding: 16px; transform: translateY(100%); transition: transform .25s; text-align:center;}
.rn-sheet.is-open { pointer-events: auto; }
.rn-sheet.is-open .rn-backdrop { opacity: 1; }
.rn-sheet.is-open .rn-panel { transform: translateY(0); }
.no-scroll { overflow: hidden; }
.rn-actions { text-align:center; gap:8px; justify-content:flex-end; margin-top:12px; }


@media (prefers-color-scheme: dark){
  .rn-panel {background:#121212; color:#eee;}
  #rename-input {background:#1a1a1a; border-color:#333; color:#fff;}
  #rename-input:focus {border-color:#3ec1bf; box-shadow: 0 0 0 3px rgba(62,193,191,.2);}
  .btn.ghost {border-color:#333; color:#eee;}
}

/* ===== Titres & textes ===== */
h1,h2,h3{ margin: 0 0 .5em 0; line-height: 1.25; }
.muted{ color: var(--muted); font-size: .925em; }

/* ===== Grille des éléments (checkbox + label / champs) ===== */
.item{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 10px 12px;
  padding-block: 6px; /* augmente la zone tactile */
}

.item:has(input[type="text"], textarea, select){
  grid-template-columns: 1fr; /* les champs texte prennent toute la ligne */
}

/* ===== Champs de formulaire ===== */
label{
  font-weight: 600;
  cursor: pointer;
}

input, select, textarea, button{
  font: inherit;
}

.actions-btn {
    background-color: #F67A3C;
    margin-bottom:3px;
}

.title-btn {
    background: transparent;
    font-size:larger;
    box-shadow: none;
}

.item[row][data-item-id]::after {
  content: attr(data-item-id);
  font-size: 11px; opacity:.6; margin-left:8px;
}


.is-obsolete { opacity: .7; }

/* input[type="text"],
textarea,
select{
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 12px 14px;
  background: #fff;
  color: var(--text);
  min-height: 44px;          cible tactile minimale 
}

textarea{ min-height: 120px; resize: vertical; }
*/

/* Checkbox ergonomique */
input[type="checkbox"]{
  inline-size: 22px;
  block-size: 22px;
  margin: 2px 0 0;           /* aligne visuellement avec le label */
  accent-color: var(--brand);/* couleur de coche native, très accessible */
  cursor: pointer;
}

/* États focus visibles (clavier) */
:focus-visible{
  outline: 3px solid var(--brand-2);
  outline-offset: 2px;
}

/* Désactivés */
:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* ===== Boutons ===== */
button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border: 0;
  border-radius: 12px;
  padding: 12px 18px;
  min-height: 48px;          /* confort tactile */
  background: var(--brand);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,.1);
  transition: transform .02s ease-in-out, filter .15s ease;
}
button:hover{ filter: brightness(.95); }
button:active{ transform: translateY(1px); }

/* Variante bouton secondaire */
button.btn-ghost{
  background: transparent;
  color: #666!important;
    border: 1px solid #cbd5e1;
}

/* ===== Barre d’action “Sauvegarder” collante ===== */
.form-actions{
  position: sticky;
  bottom: 0;
  z-index: 10;
  padding: 10px;
  margin-top: 12px;
  backdrop-filter: saturate(160%) blur(6px);
  background: color-mix(in oklab, var(--bg) 70%, #fff);
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
  box-shadow: 0 -4px 18px rgba(0,0,0,.08);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}
.form-actions .progress{
  margin-right: auto;
  align-self: center;
  font-size: .95em;
  color: var(--muted);
}

/* ===== Petites améliorations d’accessibilité ===== */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Préfère moins d’animations */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ===== Responsivité ===== */
/* Téléphones par défaut → déjà ok avec clamp() */

/* ≥ 640px : agrandit le confort visuel et les espacements */
@media (min-width: 640px){
  .card{ padding: 22px; }
  .item{ gap: 12px 14px; }
}

/* ≥ 900px : colonne plus large mais lisible */
@media (min-width: 900px){
  .container{ max-width: 900px; }
}

/* ===== Mode contraste élevé (si dispo) ===== */
@media (prefers-contrast: more){
  :focus-visible{ outline-width: 4px; }
  button{ box-shadow: none; }
  input[type="text"], textarea, select{ border-color:#6b7280; }
}

/* Respect du prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  #save-toast { transition: none; }
  .st-spinner, .st-path { animation: none !important; }
}

/* Le conteneur principal */
#form {
  position: relative;  /* Pour positionner les flèches dedans */
  --gap: 16px;
  --viewport-offset: 120px; /* hauteur à retrancher (header, etc.) */
}

/* ===== Mode CARDS (swiper) ===== */
#form[data-view="cards"]{
  display:flex;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  gap:var(--gap);
  padding:0 var(--gap);
}

/* Chaque section = une "slide" plein écran (scroll vertical interne si long) */
#form[data-view="cards"] > section.card.section{
  flex:0 0 100%;
  max-width:100%;
  height:calc(100dvh - var(--viewport-offset));
  scroll-snap-align:start;
  border-radius:18px;
  background:var(--card-bg,#fff);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  overflow:auto; /* scrolle à l’intérieur si contenu long */
  -webkit-overflow-scrolling:touch;
  padding:20px;
}

/* En carte: garder le header visible pendant le scroll interne */
#form[data-view="cards"] .section-header{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(to bottom, var(--card-bg,#fff) 70%, rgba(255,255,255,0));
  padding-bottom:8px; margin:-20px -20px 12px; padding:20px;
  border-top-left-radius:18px; border-top-right-radius:18px;
}

/* Flèches (desktop) */
/* 
#form[data-view="cards"] .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px; border:none; border-radius:999px;
  background:rgba(0,0,0,.35); color:#fff; font-size:28px; line-height:44px;
  cursor:pointer; display:none; z-index:10;
}
#form[data-view="cards"] .nav.prev{ left:6px; }
#form[data-view="cards"] .nav.next{ right:6px; }
@media (hover:hover){ #form[data-view="cards"] .nav{ display:block; } }
 */
 
 #form[data-view="cards"] .nav {
  position:absolute; top:50%; transform:translateY(-50%);
  width:44px; height:44px;
  border:none; border-radius:999px;
  background:rgba(0,0,0,.35);
  color:#fff; font-size:28px; line-height:44px;
  cursor:pointer;
  opacity:.85;
  z-index:10;
  /* toujours là en desktop */
  display:flex;
  align-items:center;
  justify-content:center;
}
#form[data-view="cards"] .nav.prev { left:6px; }
#form[data-view="cards"] .nav.next { right:6px; }

#form[data-view="cards"] .nav:disabled {
  opacity:.3;
  cursor:default;
}

/* ===== Mode LISTE (vertical) ===== */
#form[data-view="list"]{ display:block; overflow:visible; padding:0; }
#form[data-view="list"] > section.card.section{
  margin:0 auto var(--gap);
  width:min(720px, 100% - 24px);
  max-height:none; overflow:visible;
  border-radius:18px; padding:20px;
  background:var(--card-bg,#fff);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
}
/* Masquer flèches/points en mode liste */
#form[data-view="list"] .nav{ display:none !important; }


#cardsWrap { position: relative; }

/* le viewport qui scrolle */
#form[data-view="cards"] {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  position: relative;
  z-index: 0;
}

/* barre nav centrée en bas, une seule ligne */
#cardsWrap .cardsNav {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: nowrap;        /* empêche le retour à la ligne */
  white-space: nowrap;      /* ceinture+bretelles */
  z-index: 1000;
}

/* flèches */
#cardsWrap .nav {
  width: 36px; height: 36px;
  border: none; border-radius: 999px;
  background: rgba(0,0,0,.35); color: #fff;
  font-size: 22px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: .85;
}
#cardsWrap .nav:disabled { opacity: .3; cursor: default; }

/* dots */
#cardsDots { display: inline-flex; gap: 6px; }
#cardsDots button {
  width: 10px; height: 10px; border-radius: 50%;
  border: none; background: rgba(255,255,255,.55); cursor: pointer;
}
#cardsDots button[aria-current="true"] { background: #fff; }


/* Overlay masqué par défaut */
.help-overlay[hidden]{ display:none !important; }
.help-overlay{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.45); z-index:9999;
}
.help-dialog{
  width:min(900px,92vw); max-height:90vh; background:#fff; color:#222;
  border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25);
  display:flex; flex-direction:column; position:relative;
}
.help-title{ margin:0; padding:16px 56px 0 20px; font-size:20px; }
.help-close{ position:absolute; right:10px; top:8px; width:40px; height:40px;
  border:0; border-radius:999px; background:transparent; font-size:28px; cursor:pointer; }
.help-content{ padding:16px 20px 20px; overflow:auto; }



/* Mobile : masquer la nav complète */
@media (max-width:768px){
  #cardsWrap .cardsNav { display:none !important; }
}


/* mobile: cache les dots et les flèches */
@media (max-width: 768px) {
   #cardsWrap .cardsNav { display:none !important; }
}