/* =====================================================================
 * Sondage "L'accès au téléphone pour tous"
 * Feuille de styles unique avec trois modes d'accessibilité :
 *   - Mode standard (par défaut)
 *   - Mode LSF (sourds) : intègre une vidéo en Langue des Signes
 *   - Mode contraste (sourds-aveugles) : noir / jaune, contenu allégé
 *   - Mode pictogrammes (aphasiques) : pictos + français FALC
 *
 * Accessibilité :
 *   - WCAG AA minimum, AAA en mode contraste
 *   - Cibles tactiles >= 44px
 *   - Focus toujours visible
 *   - Pas d'animation pour prefers-reduced-motion
 *   - Sémantique HTML respectée pour lecteurs d'écran et plages braille
 * ===================================================================== */

/* ----- Variables -------------------------------------------------- */
:root {
  /* Mode standard */
  --fond            : #ffffff;
  --fond-bloc       : #f6f7fb;
  --fond-bloc-fort  : #eef0f7;
  --texte           : #1a1d29;
  --texte-doux      : #4a5066;
  --primaire        : #1f4dd6;
  --primaire-fonce  : #1736a0;
  --primaire-clair  : #e7edff;
  --bordure         : #c9cfde;
  --bordure-forte   : #1f4dd6;
  --erreur          : #b30021;
  --succes          : #1c7c3b;
  --focus           : #ffbf00;
  --gros-rayon      : 14px;
  --rayon           : 8px;

  --taille-texte      : 17px;
  --hauteur-ligne     : 1.55;
  --taille-titre-1    : clamp(1.6rem, 1.2rem + 1.5vw, 2.4rem);
  --taille-titre-2    : clamp(1.3rem, 1rem + 1vw, 1.8rem);

  --max-largeur       : 760px;
  --max-largeur-large : 1100px;

  --picto-taille      : 56px;
}

/* ----- Reset léger ----------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

/* L'attribut [hidden] doit toujours masquer, même quand l'élément
   a une règle display:flex / display:inline-flex (la classe l'emporte
   sur l'attribut en termes de spécificité, d'où le !important).      */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", "Helvetica Neue", Arial, sans-serif;
  font-size: var(--taille-texte);
  line-height: var(--hauteur-ligne);
  color: var(--texte);
  background: var(--fond);
}
img, video { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }

/* ----- Utilitaire : visible uniquement pour les lecteurs d'écran -- */
.visuellement-cache {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
  border: 0;
}

/* ----- Focus visible global -------------------------------------- */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

/* ----- Mise en page ---------------------------------------------- */
.conteneur {
  width: 100%;
  max-width: var(--max-largeur);
  margin: 0 auto;
  padding: 32px 20px 80px;
}
.conteneur--large { max-width: var(--max-largeur-large); }
.conteneur--etroit { max-width: 480px; }

/* ----- Barre d'outils d'accessibilité ---------------------------- */
.barre-acces {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fond-bloc);
  border-bottom: 1px solid var(--bordure);
}
.barre-acces__inner {
  max-width: var(--max-largeur-large);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
}
.barre-acces__titre {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--texte-doux);
}
.barre-acces__groupe { display: flex; flex-wrap: wrap; gap: 8px; }
.barre-acces__bouton {
  border: 2px solid var(--bordure);
  background: #fff;
  color: var(--texte);
  padding: 8px 12px;
  border-radius: var(--rayon);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.barre-acces__bouton[aria-pressed="true"] {
  background: var(--primaire);
  color: #fff;
  border-color: var(--primaire-fonce);
}
.barre-acces__bouton:hover { border-color: var(--primaire); }

/* ----- Boutons --------------------------------------------------- */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 20px;
  min-height: 48px;
  border-radius: var(--rayon);
  border: 2px solid var(--bordure);
  background: #fff;
  color: var(--texte);
  text-decoration: none;
  font-weight: 600;
}
.bouton:hover { border-color: var(--primaire); }
.bouton--principal {
  background: var(--primaire);
  color: #fff;
  border-color: var(--primaire-fonce);
}
.bouton--principal:hover { background: var(--primaire-fonce); }
.bouton--secondaire { background: transparent; }
.bouton--bloc { width: 100%; }
.bouton[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ----- Titres ---------------------------------------------------- */
h1 { font-size: var(--taille-titre-1); margin: 0 0 16px; line-height: 1.2; }
h2 { font-size: var(--taille-titre-2); margin: 32px 0 12px; line-height: 1.25; }
h3 { font-size: 1.15rem; margin: 18px 0 8px; }
p  { margin: 0 0 14px; }

/* ----- Sélecteur de mode (1ère étape) --------------------------- */
.mode-picker { padding: 16px 0; }
.mode-picker__sous-titre { color: var(--texte-doux); margin-bottom: 24px; }
.mode-picker__choix {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.mode-picker__bouton {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 24px 16px;
  border: 3px solid var(--bordure);
  border-radius: var(--gros-rayon);
  background: var(--fond);
  color: var(--texte);
  font-weight: 600;
  min-height: 180px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.mode-picker__bouton:hover { border-color: var(--primaire); background: var(--primaire-clair); }
.mode-picker__bouton:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.mode-picker__icone { font-size: 3rem; line-height: 1; }
.mode-picker__titre { font-size: 1.3rem; font-weight: 700; }
.mode-picker__desc { font-size: 0.95rem; font-weight: 400; color: var(--texte-doux); }

[data-mode="sourd-aveugle"] .mode-picker__bouton { background: #000; color: #ffd400; border-color: #ffd400; }
[data-mode="sourd-aveugle"] .mode-picker__desc { color: #ffd400; }
[data-mode="pictogrammes"] .mode-picker__bouton { min-height: 220px; }

/* ----- Page d'accueil ------------------------------------------- */
.intro__bloc {
  background: var(--fond-bloc);
  border-radius: var(--gros-rayon);
  padding: 24px;
  margin-bottom: 24px;
}
.intro__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* ----- Barre de progression ------------------------------------- */
.progression { margin-bottom: 24px; }
.progression__texte { font-size: 0.9rem; color: var(--texte-doux); margin-bottom: 6px; }
.progression__rail {
  background: var(--fond-bloc-fort);
  height: 12px;
  border-radius: 999px;
  overflow: hidden;
}
.progression__avance {
  height: 100%;
  background: var(--primaire);
  transition: width 0.3s ease;
}

/* ----- Question -------------------------------------------------- */
.question {
  background: var(--fond);
  border: 1px solid var(--bordure);
  border-radius: var(--gros-rayon);
  padding: 24px;
}
.question__entete { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.question__numero {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--texte-doux);
  margin-bottom: 6px;
}
.question__texte { font-size: 1.2rem; font-weight: 600; margin: 0; }
.question__simple {
  font-size: 1.05rem;
  color: var(--texte-doux);
  margin: 6px 0 0;
  font-style: italic;
}
.question__aide {
  background: var(--primaire-clair);
  border-left: 4px solid var(--primaire);
  padding: 10px 14px;
  border-radius: 0 var(--rayon) var(--rayon) 0;
  margin: 12px 0;
  font-size: 0.95rem;
}
.question__picto-titre { display: none; }

/* ----- Vidéo LSF ------------------------------------------------- */
/* N'est affichée qu'en mode LSF. Pour les autres modes (texte,
   sourd-aveugle, pictogrammes), la balise est rendue côté JS mais
   masquée par défaut. */
.lsf {
  display: none;
  margin: 16px 0;
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  background: #000;
  position: relative;
  overflow: hidden;
}
[data-mode="lsf"] .lsf { display: block; }
.lsf__video { width: 100%; aspect-ratio: 16 / 9; background: #000; }
.lsf__placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  color: #fff;
  background: #1c1f29;
  text-align: center;
  padding: 16px;
  gap: 8px;
}
.lsf__placeholder svg { width: 48px; height: 48px; opacity: 0.7; }
.lsf__legende { font-size: 0.85rem; padding: 6px 10px; color: var(--texte-doux); background: var(--fond-bloc); }

/* ----- Options de réponse --------------------------------------- */
.options { display: grid; gap: 12px; margin-top: 8px; }
.options[data-disposition="grille"] {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  cursor: pointer;
  background: #fff;
  min-height: 56px;
}
.option:hover { border-color: var(--primaire); background: var(--primaire-clair); }
.option input[type="radio"], .option input[type="checkbox"] {
  width: 22px; height: 22px;
  flex-shrink: 0;
  margin: 0;
  accent-color: var(--primaire);
}
.option__label { flex: 1; }
.option:has(input:checked) {
  border-color: var(--primaire-fonce);
  background: var(--primaire-clair);
  box-shadow: inset 0 0 0 1px var(--primaire);
}

/* Pictogramme dans une option */
.option__picto, .picto {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.picto--emoji {
  font-size: calc(var(--picto-taille) * 0.8);
  line-height: 1;
}
.option .picto, .option .option__picto, .option .picto--emoji {
  width: var(--picto-taille);
  height: var(--picto-taille);
}

/* ----- Champs texte --------------------------------------------- */
input[type="text"],
input[type="password"],
textarea,
select {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--bordure);
  border-radius: var(--rayon);
  font: inherit;
  background: #fff;
  color: var(--texte);
}
textarea { min-height: 120px; resize: vertical; }
label {
  display: block;
  font-weight: 600;
  margin: 12px 0 6px;
}
.champ-aide {
  font-size: 0.9rem;
  color: var(--texte-doux);
  margin: 4px 0 0;
}

/* ----- Navigation entre questions ------------------------------- */
.nav-questions {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 24px;
}
.nav-questions__milieu { color: var(--texte-doux); align-self: center; }

/* ----- Alertes / messages --------------------------------------- */
.alerte {
  padding: 12px 16px;
  border-radius: var(--rayon);
  margin: 12px 0;
  border-left: 4px solid var(--erreur);
  background: #fdecef;
  color: #5b0010;
}
.succes {
  padding: 14px 16px;
  border-radius: var(--rayon);
  margin: 12px 0;
  border-left: 4px solid var(--succes);
  background: #e6f4ec;
  color: #0e3d1d;
}

/* ----- Page de remerciements ------------------------------------ */
.merci {
  text-align: center;
  padding: 40px 20px;
}

/* ----- Tableau admin -------------------------------------------- */
.entete-admin {
  background: var(--fond-bloc);
  border-bottom: 1px solid var(--bordure);
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.entete-admin h1 { margin: 0; }
.tableau-defile { overflow-x: auto; }
.tableau-reponses {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}
.tableau-reponses th,
.tableau-reponses td {
  padding: 10px 12px;
  border: 1px solid var(--bordure);
  text-align: left;
  vertical-align: top;
}
.tableau-reponses th { background: var(--fond-bloc); }
.tableau-reponses pre { white-space: pre-wrap; max-width: 480px; font-size: 0.85rem; }
.pagination { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.pagination span,
.pagination a { padding: 6px 12px; border: 1px solid var(--bordure); border-radius: var(--rayon); }
.pagination [aria-current="page"] { background: var(--primaire); color: #fff; border-color: var(--primaire-fonce); }

/* =====================================================================
 * Mode 1 : LSF (sourds)
 * Pas de modification visuelle majeure : on rend juste la zone vidéo
 * plus visible et on masque la version "simple" du texte (inutile).
 * ===================================================================== */
[data-mode="lsf"] .question__simple { display: none; }
[data-mode="lsf"] .lsf { display: block; }
[data-mode="lsf"] .question__entete { flex-direction: column; }

/* =====================================================================
 * Mode 2 : Sourd-aveugle (haute lisibilité visuelle, sortie braille)
 *
 * Objectifs :
 *   - Contraste maximum (jaune sur noir)
 *   - Texte large
 *   - DOM minimal : pictogrammes, vidéos LSF, décor masqués
 *     pour que la sortie braille soit nette
 *   - Pas d'icônes décoratives
 * ===================================================================== */
[data-mode="sourd-aveugle"] {
  --fond           : #000000;
  --fond-bloc      : #000000;
  --fond-bloc-fort : #1a1a00;
  --texte          : #ffd400;
  --texte-doux     : #ffd400;
  --primaire       : #ffd400;
  --primaire-fonce : #ffd400;
  --primaire-clair : #2a2200;
  --bordure        : #ffd400;
  --bordure-forte  : #ffd400;
  --erreur         : #ff8a8a;
  --succes         : #ffd400;
  --focus          : #ffffff;
  --taille-texte   : 22px;
  --hauteur-ligne  : 1.7;
}
[data-mode="sourd-aveugle"] body { background: #000; color: #ffd400; }
[data-mode="sourd-aveugle"] .question,
[data-mode="sourd-aveugle"] .intro__bloc,
[data-mode="sourd-aveugle"] .barre-acces,
[data-mode="sourd-aveugle"] .barre-acces__bouton,
[data-mode="sourd-aveugle"] .bouton,
[data-mode="sourd-aveugle"] .option,
[data-mode="sourd-aveugle"] input[type="text"],
[data-mode="sourd-aveugle"] input[type="password"],
[data-mode="sourd-aveugle"] textarea,
[data-mode="sourd-aveugle"] select {
  background: #000;
  color: #ffd400;
  border-color: #ffd400;
  border-width: 3px;
}
[data-mode="sourd-aveugle"] .barre-acces__bouton[aria-pressed="true"],
[data-mode="sourd-aveugle"] .bouton--principal,
[data-mode="sourd-aveugle"] .option:has(input:checked) {
  background: #ffd400;
  color: #000;
  outline: 3px solid #fff;
  outline-offset: 2px;
}
[data-mode="sourd-aveugle"] a { color: #ffd400; text-decoration: underline; }
[data-mode="sourd-aveugle"] .progression__rail { background: #2a2200; border: 2px solid #ffd400; }
[data-mode="sourd-aveugle"] .progression__avance { background: #ffd400; }
[data-mode="sourd-aveugle"] .alerte { background: #2a0000; color: #ffb0b0; border-color: #ff8a8a; }

/* Allègement du DOM pour les plages braille */
[data-mode="sourd-aveugle"] .lsf,
[data-mode="sourd-aveugle"] .picto,
[data-mode="sourd-aveugle"] .option__picto,
[data-mode="sourd-aveugle"] .question__aide {
  display: none !important;
}
/* On affiche la version simplifiée (FALC) du texte qui est aussi plus
   adaptée à la lecture braille. */
[data-mode="sourd-aveugle"] .question__texte { display: none; }
[data-mode="sourd-aveugle"] .question__simple {
  display: block;
  font-size: 1.3rem;
  font-style: normal;
  font-weight: 700;
  color: #ffd400;
  margin: 0;
}
[data-mode="sourd-aveugle"] .intro__paragraphes { display: none; }
[data-mode="sourd-aveugle"] .intro__simple { display: block; }

/* =====================================================================
 * Mode 3 : Pictogrammes (aphasiques)
 *   - Texte FALC mis en avant
 *   - Pictogrammes systématiques sur les options
 *   - Cibles tactiles élargies
 * ===================================================================== */
[data-mode="pictogrammes"] {
  --taille-texte: 19px;
  --picto-taille: 96px;
}
[data-mode="pictogrammes"] .question__texte { font-size: 1.05rem; color: var(--texte-doux); font-weight: 500; }
[data-mode="pictogrammes"] .question__simple {
  display: block;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 700;
  color: var(--texte);
  margin: 0;
}
[data-mode="pictogrammes"] .question__picto-titre {
  display: inline-flex;
  width: 96px; height: 96px;
  margin-right: 14px;
}
[data-mode="pictogrammes"] .question__entete {
  flex-direction: row;
  align-items: center;
}
[data-mode="pictogrammes"] .options {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
[data-mode="pictogrammes"] .option {
  flex-direction: column;
  text-align: center;
  padding: 18px 14px;
  min-height: 200px;
  gap: 10px;
}
[data-mode="pictogrammes"] .option__label { font-size: 1.15rem; font-weight: 600; }
[data-mode="pictogrammes"] .option input[type="radio"],
[data-mode="pictogrammes"] .option input[type="checkbox"] {
  width: 28px; height: 28px;
}

/* =====================================================================
 * Enregistreur vidéo LSF (modal)
 * ===================================================================== */
.video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 16px;
}
.video-modal__contenu {
  background: var(--fond);
  color: var(--texte);
  border-radius: var(--gros-rayon);
  max-width: 720px;
  width: 100%;
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
}
.video-modal__zone {
  position: relative;
  margin: 12px 0;
  background: #000;
  border-radius: var(--rayon);
  overflow: hidden;
  aspect-ratio: 4 / 3;
}
.video-modal__preview {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #000;
}
.video-modal__chrono {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 4px 10px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.video-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

/* Bloc inline « Autre — précisez » qui apparaît dans les choix */
.autre-precision {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--fond-bloc);
  border-radius: var(--rayon);
  border-left: 3px solid var(--primaire);
}
.autre-precision label { display: block; margin-bottom: 4px; }

/* Bloc « vidéo enregistrée » dans le formulaire de question */
.reponse-video {
  margin: 12px 0;
  padding: 12px;
  border: 2px dashed var(--bordure);
  border-radius: var(--rayon);
  background: var(--fond-bloc);
}
.reponse-video__bouton {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.reponse-video__apercu {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.reponse-video__apercu video {
  max-width: 240px;
  border-radius: var(--rayon);
}

/* En mode sourd-aveugle et pictogrammes : enregistreur vidéo masqué
   (l'utilisateur dispose déjà du champ texte). */
[data-mode="sourd-aveugle"] .reponse-video,
[data-mode="pictogrammes"] .reponse-video,
[data-mode="standard"] .reponse-video { display: none; }
[data-mode="lsf"] .reponse-video { display: block; }

/* =====================================================================
 * Préférence "réduire les animations"
 * ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
 * Petits écrans
 * ===================================================================== */
@media (max-width: 600px) {
  .conteneur { padding: 20px 14px 60px; }
  .question { padding: 18px; }
  .nav-questions { flex-direction: column; }
  .nav-questions .bouton { width: 100%; }
}

/* =====================================================================
 * Impression
 * ===================================================================== */
@media print {
  .barre-acces, .nav-questions, .lsf { display: none; }
  body { background: #fff; color: #000; }
}