/* Comparateur d'appareils photo hybrides.
 *
 * Remplace deux dependances externes que l'outil chargeait par le CDN :
 * Tailwind en version « play », qui embarque un compilateur CSS execute dans
 * le navigateur, et Font Awesome, pour cinq icones. Soixante treize classes
 * etaient reellement utilisees, page et script confondus ; elles sont toutes
 * reecrites ici, a la main.
 *
 * Cette feuille n'est chargee que sur la page du comparateur, donc les noms
 * d'utilitaires ne peuvent pas deteindre sur le reste du site.
 *
 * Les couleurs viennent de la palette du theme, pas de celle de Tailwind :
 * l'outil ressemble desormais au site qui l'heberge.
 */

.comparateur{max-width:768px;margin:32px auto;background:#fff;padding:24px;
  border:1px solid var(--trait);border-radius:var(--r-m);
  box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* Mise en page */
.max-w-3xl{max-width:768px}
.mx-auto{margin-left:auto;margin-right:auto}
.block{display:block}
.hidden{display:none}
.flex{display:flex}
.items-center{align-items:center}
.justify-between{justify-content:space-between}
.relative{position:relative}
.text-center{text-align:center}
.bg-white{background:#fff}

/* Espacements */
.p-6{padding:24px}
.px-4{padding-left:16px;padding-right:16px}
.py-2{padding-top:8px;padding-bottom:8px}
.py-3{padding-top:12px;padding-bottom:12px}
.mr-2{margin-right:8px}
.mb-3{margin-bottom:12px}
.mb-4{margin-bottom:16px}
.mb-6{margin-bottom:24px}
.mt-2{margin-top:8px}
.mt-4{margin-top:16px}
.mt-6{margin-top:24px}
.mt-8{margin-top:32px}
.space-y-2>*+*{margin-top:8px}
.space-y-4>*+*{margin-top:16px}

/* Typographie */
.text-sm{font-size:14px}
.text-lg{font-size:18px}
.text-xl{font-size:20px}
.text-2xl{font-size:24px;line-height:1.25}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.italic{font-style:italic}
.list-disc{list-style:disc}
.list-inside{list-style-position:inside}

/* Couleurs, prises sur la palette du theme */
.text-gray-800{color:var(--encre)}
.text-gray-700{color:var(--encre)}
.text-gray-600{color:var(--gris)}
.text-gray-500{color:var(--gris)}
.text-gray-400{color:#b4b4b4}
.text-white{color:#fff}
.text-blue-800{color:var(--bleu)}
.text-red-600,.text-red-500{color:#b3261e}
.bg-blue-50{background:#f2f5fe}
.border-blue-200{border-color:#c9d8f8}
.bg-gray-300{background:#e7e7e7}
.border{border-width:1px;border-style:solid}
.rounded{border-radius:var(--r-s)}
.rounded-lg{border-radius:var(--r-m)}
.shadow-md{box-shadow:0 1px 3px rgba(0,0,0,.06)}

/* Boutons */
.bg-blue-500{background:var(--violet)}
.hover\:bg-blue-700:hover{background:#3200cc}
.hover\:bg-gray-400:hover{background:#d9d9d9}
.disabled\:opacity-50:disabled{opacity:.5;cursor:not-allowed}
#prev-btn,#next-btn,.secondary-button,.cta-button{border:0;cursor:pointer;
  font:inherit;border-radius:var(--r-s);padding:10px 18px}
.secondary-button{background:var(--fond);border:1px solid var(--trait);
  color:var(--encre)}
.cta-button{background:var(--violet);color:#fff;text-decoration:none;
  display:inline-block}

/* Barre de progression */
#progress-bar-container{height:6px;background:var(--trait);
  border-radius:999px;overflow:hidden;margin-bottom:24px}
#progress-bar{height:100%;width:0;background:var(--violet);
  transition:width .25s ease}

/* Elements propres a l'outil */
.criteria-list{margin:8px 0 0;padding-left:18px}
.match-indicator{margin-right:6px}
.match-indicator.met{color:#0a7a3c}
.match-indicator.not-met{color:#b3261e}
.rating{letter-spacing:1px}
.note-text{color:var(--gris);font-size:14px}
.placeholder{color:var(--gris);font-style:italic}
.tooltip-trigger{border-bottom:1px dotted var(--gris);cursor:help;
  position:relative}
.tooltip-text{position:absolute;left:0;bottom:130%;z-index:5;width:240px;
  background:var(--noir);color:#fff;padding:8px 10px;border-radius:var(--r-s);
  font-size:13px;line-height:1.4;opacity:0;visibility:hidden;
  transition:opacity .15s}
.tooltip-trigger:hover .tooltip-text,
.tooltip-trigger:focus-within .tooltip-text{opacity:1;visibility:visible}

/* Les cinq icones autrefois servies par Font Awesome, rendues en caracteres.
   « fas » est la variante pleine, « far » la variante evidee. */
.fas,.far{font-style:normal;display:inline-block}
.fas.fa-star::before{content:"\2605"}
.far.fa-star::before{content:"\2606"}
.fas.fa-check-circle::before{content:"\2713"}
.fas.fa-times-circle::before{content:"\2715"}
.fas.fa-question-circle::before{content:"?";font-weight:700}

@media (min-width:768px){
  .comparateur{padding:32px}
  .md\:p-8{padding:32px}
  .md\:text-2xl{font-size:24px}
  .md\:text-3xl{font-size:30px;line-height:1.2}
}