/* Cypios, convertisseur d'équivalences alimentaires
   Styles du contenu éditorial et des mentions. L'outil lui même porte ses
   propres styles à l'intérieur de son Shadow DOM, rien ici ne l'atteint.

   Le parti pris est volontairement discret : la typographie du texte courant
   reste celle du thème, pour que la page ressemble au reste du site. Seuls le
   tableau, l'accordéon, l'encadré de consultation et les mentions sont habillés.
*/

.cypios-outil,
.cypios-contenu {
  --cy-orange: #FF7000;
  --cy-vert: #B0D800;
  --cy-charbon: #333333;
  --cy-creme: #FFF7F1;
  --cy-peche: #FFE8D6;
  --cy-gris: #FAFAFA;
  --cy-trait: #EFE2D8;
  --cy-attenue: #6B6259;
}

/* ------------------------------------------------ mentions sous l'outil */

.cypios-source,
.cypios-avertissement {
  font-size: 0.78em;
  line-height: 1.5;
  color: var(--cy-attenue);
  margin: 8px 0 0;
}

.cypios-source { margin-top: 12px; }

/* ------------------------------------------- l'outil avant son activation */

cypios-equivalences { display: block; }

/* Le message d'attente n'apparaît qu'au bout d'une seconde et demie, pour ne
   pas clignoter le temps que le module se charge sur une bonne connexion. */
.cypios-attente {
  margin: 0;
  padding: 18px;
  border: 1px solid var(--cy-trait);
  border-radius: 14px;
  background: var(--cy-creme);
  color: var(--cy-attenue);
  font-size: 0.92em;
  line-height: 1.55;
  opacity: 0;
  animation: cypios-attente 0s linear 1.5s forwards;
}

@keyframes cypios-attente { to { opacity: 1; } }

/* ------------------------------------------------------------ chapô */

.cypios-chapo {
  font-size: 1.12em;
  line-height: 1.6;
}

/* ----------------------------------------------------------- titres */

.cypios-contenu .cypios-titre {
  font-family: 'Sora', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  margin-top: 2.2em;
}

.cypios-contenu > .cypios-titre:first-child { margin-top: 0; }

/* ---------------------------------------------------------- tableau */

.cypios-tableau-cadre {
  margin: 1.6em 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--cy-trait);
}

.cypios-tableau {
  width: 100%;
  border: 0;
  border-collapse: collapse;
  font-size: 0.94em;
  background: #FFFFFF;
}

.cypios-caption {
  caption-side: top;
  text-align: left;
  padding: 10px 14px;
  font-size: 0.82em;
  color: var(--cy-attenue);
  background: var(--cy-creme);
}

.cypios-tableau th,
.cypios-tableau td {
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
  border: 0;
}

/* L'orange de marque n'est pas retouché. Le texte posé dessus est en charbon
   et non en blanc : blanc sur orange donne 2,77 pour 1, charbon sur orange donne
   4,55 pour 1, ce que la norme WCAG AA demande pour du texte de cette taille. */
.cypios-tableau thead th {
  background: var(--cy-orange);
  color: var(--cy-charbon);
  font-family: 'Sora', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.01em;
}

.cypios-tableau tbody tr:nth-child(odd)  td,
.cypios-tableau tbody tr:nth-child(odd)  th { background: var(--cy-peche); }
.cypios-tableau tbody tr:nth-child(even) td,
.cypios-tableau tbody tr:nth-child(even) th { background: var(--cy-gris); }

.cypios-tableau tbody th {
  font-family: 'Sora', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  color: var(--cy-charbon);
  white-space: normal;
}

/* Sous 640 px chaque ligne devient une carte. Le balisage reste un vrai
   tableau, il travaille pour le référencement, seul l'affichage change. */
@media (max-width: 640px) {

  .cypios-tableau thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

  .cypios-tableau,
  .cypios-tableau tbody,
  .cypios-tableau tr,
  .cypios-tableau th,
  .cypios-tableau td { display: block; width: auto; }

  /* Un tableau passé en display block rend sa légende sur une colonne étroite.
     On la remet en bloc pleine largeur. */
  .cypios-caption { display: block; width: auto; }

  .cypios-tableau tbody tr { border-bottom: 1px solid var(--cy-trait); }
  .cypios-tableau tbody tr:last-child { border-bottom: 0; }

  .cypios-tableau tbody th {
    font-size: 1.02em;
    padding-bottom: 4px;
  }

  .cypios-tableau tbody td { padding-top: 4px; }
  .cypios-tableau tbody td:last-child { padding-bottom: 13px; }

  .cypios-tableau tbody td::before {
    content: attr(data-intitule) " : ";
    color: var(--cy-attenue);
    font-size: 0.86em;
  }
}

/* -------------------------------------------------------- accordéon */

.cypios-faq { margin: 1.4em 0 0; }

.cypios-q {
  border-bottom: 1px solid var(--cy-trait);
}

.cypios-q:first-child { border-top: 1px solid var(--cy-trait); }

.cypios-q > summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 40px 16px 0;
  position: relative;
  min-height: 24px;
}

.cypios-q > summary::-webkit-details-marker { display: none; }

.cypios-q > summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-top: -6px;
  border-right: 2px solid var(--cy-orange);
  border-bottom: 2px solid var(--cy-orange);
  transform: rotate(45deg);
  transition: transform 0.18s ease;
}

.cypios-q[open] > summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}

.cypios-q > summary:focus-visible {
  outline: 3px solid var(--cy-orange);
  outline-offset: 2px;
  border-radius: 6px;
}

.cypios-q-titre {
  display: inline;
  margin: 0;
  font-family: 'Sora', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1.02em;
  font-weight: 600;
  line-height: 1.45;
  color: var(--cy-charbon);
}

.cypios-r { padding: 0 0 18px; }
.cypios-r p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .cypios-q > summary::after { transition: none; }
}

/* ----------------------------------------------------- consultation */

.cypios-consultation {
  margin: 2.4em 0 0;
  padding: 22px 24px;
  background: var(--cy-creme);
  border: 1px solid var(--cy-trait);
  border-radius: 14px;
}

.cypios-consultation .cypios-titre { margin-top: 0; }
.cypios-consultation p:last-child { margin-bottom: 0; }

a.cypios-bouton {
  display: inline-block;
  padding: 13px 26px;
  min-height: 44px;
  background: var(--cy-orange);
  color: var(--cy-charbon);
  border-radius: 999px;
  font-family: 'Sora', 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}

a.cypios-bouton:hover,
a.cypios-bouton:focus { color: var(--cy-charbon); opacity: 0.9; }

a.cypios-bouton:focus-visible {
  outline: 3px solid var(--cy-charbon);
  outline-offset: 3px;
}

/* Le contour de mise au point doit atteindre 3 pour 1 avec ce qui l'entoure.
   L'orange n'y parvient pas sur fond clair, le charbon oui, à 12,6 pour 1. */
.cypios-q > summary:focus-visible {
  outline-color: var(--cy-charbon);
}

/* --------------------------------------------------------- mentions */

.cypios-mentions {
  margin: 2.4em 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--cy-trait);
  font-size: 0.82em;
  line-height: 1.6;
  color: var(--cy-attenue);
}

.cypios-mentions p { margin: 0 0 0.8em; }
.cypios-mentions p:last-child { margin-bottom: 0; }

/* ------------------------------------------------- alerte technique */

.cypios-alerte {
  padding: 14px 16px;
  border-left: 4px solid #8E1B2E;
  background: #F9DCE1;
  color: #8E1B2E;
}