@charset "UTF-8";
/* =====================================================================
   Ideequate V2 — feuille de style unique, mobile-first
   ---------------------------------------------------------------------
   Aucun framework, aucune dépendance, aucune étape de build.
   ~330 lignes écrites à la main : rien à mettre à jour, jamais.

   Structure :
     1. Variables et remise à zéro
     2. Structure de page
     3. Composants communs (boutons, cartes)
     4. Page d'accueil
     5. Questionnaire
     6. Classement des idées
     7. Pied de page
     8. Tablette et desktop  (UNE seule requête média, à 768 px)
   ===================================================================== */


/* --- 1. Variables et remise à zéro ---------------------------------- */

:root {
  --bleu:        #0b76a0;
  --bleu-fonce:  #075a7a;
  --bleu-pale:   #e7f3f8;
  --orange:      #ff8633;
  --orange-pale: #fff2e8;
  --encre:       #1c2733;
  --encre-doux:  #5b6b7a;
  --trait:       #dde5ec;
  --fond:        #f6f8fa;
  --blanc:       #ffffff;
  --rayon:       10px;
  --ombre:       0 1px 2px rgba(28, 39, 51, .06), 0 4px 12px rgba(28, 39, 51, .05);
  --largeur:     1100px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  padding: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
}

h1, h2, h3, p, ol, ul, fieldset, legend, figure { margin: 0; padding: 0; }
ol, ul { list-style: none; }
fieldset { border: 0; }
img { max-width: 100%; height: auto; display: block; }

a { color: var(--bleu); }

:focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 2px;
}

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.skip-link {
  position: absolute; left: -9999px;
  background: var(--encre); color: #fff;
  padding: .6rem 1rem; z-index: 10;
}
.skip-link:focus { left: .5rem; top: .5rem; }


/* --- 2. Structure de page ------------------------------------------- */

.bandeau {
  background: var(--blanc);
  border-bottom: 3px solid var(--orange);
}
.bandeau__inner {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: .7rem 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}
.marque {
  display: flex; align-items: center; gap: .5rem;
  text-decoration: none; color: var(--encre);
}
.marque__logo { width: 32px; height: 32px; }
.marque__nom  { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }

.nav { display: flex; gap: 1rem; font-size: .95rem; }
.nav a { color: var(--encre-doux); text-decoration: none; padding: .25rem 0; }
.nav a:hover { color: var(--bleu); }
.nav a[aria-current="page"] {
  color: var(--bleu); font-weight: 600;
  border-bottom: 2px solid var(--bleu);
}

.conteneur {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
}


/* --- 3. Composants communs ------------------------------------------ */

.carte {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 1.25rem;
}
.carte__titre {
  font-size: 1.3rem; line-height: 1.3; font-weight: 700;
  margin-bottom: .85rem;
}
.carte__consigne {
  color: var(--encre-doux); font-size: .95rem; margin-bottom: .4rem;
}
.section__titre {
  font-size: 1.15rem; font-weight: 700;
  margin-bottom: .75rem;
}

.bouton {
  display: inline-block;
  min-height: 48px;          /* cible tactile confortable */
  padding: .8rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--rayon);
  font: inherit; font-weight: 600;
  text-align: center; text-decoration: none;
  cursor: pointer;
}
.bouton--primaire {
  background: var(--bleu); color: #fff;
}
.bouton--primaire:hover { background: var(--bleu-fonce); }

.bouton--secondaire {
  background: var(--blanc); color: var(--bleu);
  border-color: var(--bleu);
}
.bouton--secondaire:hover { background: var(--bleu-pale); }

.bouton--discret {
  background: none; color: var(--encre-doux);
  border: 0; padding: .6rem 0; min-height: 44px;
  text-decoration: underline; font-weight: 400; font-size: .9rem;
}
.bouton--discret:hover { color: var(--encre); }


/* --- 4. Page d'accueil ---------------------------------------------- */

.hero {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 2rem 1.25rem;
  text-align: center;
  margin-bottom: 1.5rem;
}
.hero__kicker {
  text-transform: uppercase; letter-spacing: .08em;
  font-size: .75rem; font-weight: 700; color: var(--orange);
  margin-bottom: .5rem;
}
.hero__titre {
  font-size: 1.75rem; line-height: 1.2; font-weight: 800;
  letter-spacing: -.02em; margin-bottom: .9rem;
}
.hero__nowrap { white-space: nowrap; }
.hero__accroche {
  color: var(--encre-doux);
  max-width: 34rem; margin: 0 auto 1.5rem;
}
.hero__note {
  font-size: .85rem; color: var(--encre-doux); margin-top: .8rem;
}

.etapes { margin-bottom: 1.5rem; }
.etapes__liste { display: grid; gap: 1rem; }
.etape {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.1rem;
}
.etape__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--orange-pale); color: var(--orange);
  font-weight: 800; font-size: .95rem; margin-bottom: .5rem;
}
.etape__titre { font-size: 1.05rem; font-weight: 700; margin-bottom: .3rem; }
.etape p { color: var(--encre-doux); font-size: .95rem; }

.apropos {
  background: var(--bleu-pale);
  border: 1px solid #cfe6f0;
  border-radius: var(--rayon);
  padding: 1.25rem;
}
.apropos p { margin-bottom: .75rem; }
.apropos__signature {
  font-style: italic; color: var(--bleu-fonce);
}


/* --- 5. Questionnaire ------------------------------------------------ */

.colonnes { display: flex; flex-direction: column; gap: 1.25rem; }

.progression { margin-bottom: 1rem; }
.progression__barre {
  height: 8px; background: var(--trait);
  border-radius: 999px; overflow: hidden;
}
.progression__jauge {
  height: 100%; background: var(--orange);
  border-radius: 999px; transition: width .3s ease;
}
.progression__texte {
  font-size: .8rem; color: var(--encre-doux); margin-top: .35rem;
}

.reponses { display: flex; flex-direction: column; gap: .5rem; margin: .9rem 0 1.1rem; }

/* Toute la ligne est cliquable — c'est LA correction d'ergonomie
   au meilleur rapport effort/résultat du projet. */
.reponse {
  display: flex; align-items: flex-start; gap: .75rem;
  min-height: 44px;
  padding: .7rem .85rem;
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  background: var(--blanc);
  cursor: pointer;
}
.reponse:hover { border-color: var(--bleu); background: var(--bleu-pale); }
.reponse:has(:checked) {
  border-color: var(--bleu); background: var(--bleu-pale);
  box-shadow: inset 0 0 0 1px var(--bleu);
}
.reponse__case {
  flex: none; width: 22px; height: 22px; margin: .15rem 0 0;
  accent-color: var(--bleu); cursor: pointer;
}
.reponse__corps { display: flex; flex-direction: column; gap: .15rem; }
.reponse__texte { font-weight: 600; line-height: 1.35; }

/* Les commentaires de personnalité : texte VISIBLE, plus une info-bulle
   au survol. Au tactile, le survol n'existe pas — la V1 rendait ce
   contenu inaccessible sur smartphone. */
.reponse__indice {
  font-size: .85rem; line-height: 1.45; color: var(--encre-doux);
  font-style: italic;
}

.actions { display: flex; gap: .75rem; }
.actions .bouton { flex: 1; }

.formulaire__note {
  font-size: .82rem; color: var(--encre-doux); margin-top: .7rem;
}
.formulaire--reset {
  margin-top: 1rem; padding-top: .75rem;
  border-top: 1px solid var(--trait); text-align: center;
}

.fin__texte { margin-bottom: .7rem; }
.fin__texte--sec { color: var(--encre-doux); font-size: .95rem; }


/* --- 6. Classement des idées ---------------------------------------- */

.carte--idees { padding-bottom: .75rem; }
.carte__titre--idees {
  padding-bottom: .6rem; border-bottom: 3px solid var(--orange);
}
.carte__consigne--idees { margin-bottom: .8rem; }
.legende {
  display: block; font-size: .82rem; margin-top: .2rem;
}
.phare-pastille { color: var(--orange); }

.idees { display: flex; flex-direction: column; }
.idee {
  display: flex; align-items: baseline; gap: .7rem;
  padding: .55rem .3rem;
  border-bottom: 1px solid var(--trait);
}
.idee:last-child { border-bottom: 0; }
.idee:hover { background: var(--bleu-pale); }
.idee--phare { background: var(--orange-pale); }
.idee--phare:hover { background: #ffe6d2; }

.idee__rang {
  flex: none; width: 1.9rem; text-align: right;
  color: var(--encre-doux); font-size: .8rem;
  font-variant-numeric: tabular-nums;
}
.idee__lien {
  flex: 1; color: var(--encre); text-decoration: none;
  line-height: 1.4; padding: .15rem 0;
}
.idee__lien:hover { color: var(--bleu); text-decoration: underline; }
.idee__etoile { flex: none; color: var(--orange); }

.vide { text-align: center; padding: 2rem 1rem; }
.vide__img { margin: 0 auto .9rem; opacity: .8; }
.vide__texte { color: var(--encre-doux); max-width: 26rem; margin: 0 auto; }


/* --- 6 bis. Mentions légales ----------------------------------------- */

.legal { max-width: 44rem; }
.legal__titre {
  font-size: 1.6rem; font-weight: 800; letter-spacing: -.01em;
  margin-bottom: 1.25rem;
}
.legal__bloc {
  background: var(--blanc);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  padding: 1.25rem;
  margin-bottom: 1rem;
}
.legal__bloc--souligne {
  background: var(--bleu-pale);
  border-color: #cfe6f0;
}
.legal__soustitre {
  font-size: 1.05rem; font-weight: 700; margin-bottom: .6rem;
}
.legal__soustitre--petit {
  font-size: .95rem; margin-top: 1.1rem;
  padding-top: .9rem; border-top: 1px solid #cfe6f0;
}
.legal__bloc p { margin-bottom: .7rem; }
.legal__bloc p:last-child { margin-bottom: 0; }
.legal__phare {
  font-weight: 600; color: var(--bleu-fonce);
}
.legal__liste { margin: 0 0 .7rem; padding-left: 1.1rem; }
.legal__liste li {
  list-style: disc; margin-bottom: .3rem; color: var(--encre-doux);
}
.legal code {
  background: var(--fond); border: 1px solid var(--trait);
  padding: .05rem .3rem; border-radius: 4px;
  font-size: .9em; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.legal__retour { margin-top: 1.25rem; }


/* --- 7. Pied de page ------------------------------------------------- */

.pied {
  background: var(--blanc);
  border-top: 1px solid var(--trait);
  padding: 1.5rem 1rem;
}
.pied__inner {
  max-width: var(--largeur); margin: 0 auto;
  font-size: .9rem; color: var(--encre-doux);
}
.pied__baseline { margin-bottom: .35rem; }
.pied__liens {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .3rem .55rem;
}
.pied__sep { color: var(--trait); }
.pied__note { color: var(--encre-doux); }


/* --- 8. Tablette et desktop ------------------------------------------ */
/* UNE seule requête média. La V1 en avait deux imbriquées par accident,
   dont une vide. */

@media (min-width: 768px) {

  body { font-size: 17px; }

  .conteneur { padding: 2rem 1.5rem 4rem; }

  .hero { padding: 3rem 2rem; }
  .hero__titre { font-size: 2.4rem; }
  .hero__accroche { font-size: 1.05rem; }

  .etapes__liste { grid-template-columns: repeat(3, 1fr); }

  /* Deux colonnes : questionnaire à gauche, idées à droite.
     Flexbox remplace les float et les marges négatives de la V1. */
  .colonnes { flex-direction: row; align-items: flex-start; gap: 1.5rem; }
  .colonne--question { flex: 1 1 46%; min-width: 0; }
  .colonne--idees    { flex: 1 1 54%; min-width: 0; position: sticky; top: 1rem; }

  .carte { padding: 1.5rem; }
  .carte__titre { font-size: 1.45rem; }

  .actions .bouton { flex: 0 1 auto; }
}


/* --- Impression et préférences utilisateur --------------------------- */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

@media print {
  .bandeau, .nav, .formulaire, .progression, .pied, .skip-link { display: none; }
  body { background: #fff; }
  .carte { border: 0; box-shadow: none; }
}