/* Le panneau de retours d'une maquette
   ====================================

   POURQUOI CE FICHIER N'UTILISE AUCUNE VARIABLE DU THÈME.

   Le socle pose `theme.css` et tout le reste s'en sert : c'est la bonne règle,
   et elle ne vaut pas ici. Ce panneau doit s'afficher correctement sur
   n'importe quelle maquette, y compris une dont la palette n'est pas encore
   réglée, y compris un site à fond sombre, y compris celui où quelqu'un aura
   cassé une variable. Un outil qui sert à signaler un défaut ne peut pas être
   la victime du défaut qu'on vient lui signaler.

   Tout est donc écrit en dur, dans une gamme neutre qui ne ressemble à aucune
   charte, et c'est voulu : le client doit voir du premier coup d'œil que ce
   panneau n'est pas une partie du site, mais l'outil posé par-dessus.

   Contrastes mesurés, pas estimés :
     #F7F7F5 sur #17181A ........ 16,9:1
     #A8ADA6 sur #17181A .........  7,4:1   (texte secondaire)
     #7DD3A7 sur #17181A ......... 10,3:1   (accent)
     #17181A sur #7DD3A7 ......... 10,3:1   (texte des boutons pleins)
   Le seuil du critère RGAA 3.2 est de 4,5:1 pour du texte ordinaire.

   TOUT EST PRÉFIXÉ `rtr-`. Ce fichier est chargé dans le site d'un client :
   une classe générique comme `.panneau` ou `.bouton` y écraserait la sienne. */

/* --- Le bouton d'appel, posé dans le bandeau de maquette ----------------- */

.rtr-appel {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-left: 0.75em;
  padding: 0.35em 0.9em;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 0.95em;
  line-height: 1.3;
  cursor: pointer;
}

.rtr-appel:hover { background: rgb(255 255 255 / 0.12); }

/* Le repli mesuré, pas supposé : quand le bouton est recouvert par l'en-tête
   du site, `retour.js` lui pose cette classe. Voir le commentaire de
   `verifierAtteignable`, qui dit pourquoi ça se mesure au lieu de se décider.

   Il reste dans le bandeau côté DOM, donc dans une zone nommée : un bouton
   posé à la fin du corps de page sortirait de toute région et violerait le
   critère RGAA 9.2 sur la maquette d'un client. */
.rtr-appel--flottant {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2147483000;
  margin: 0;
  padding: 0.7rem 1.1rem;
  border-color: #7DD3A7;
  background: #17181A;
  color: #F7F7F5;
  font: 600 0.95rem/1.2 system-ui, -apple-system, "Segoe UI", sans-serif;
  box-shadow: 0 6px 24px rgb(0 0 0 / 0.35);
}

.rtr-appel--flottant:hover { background: #26282B; }

/* Sur un téléphone, le bouton s'étale sur la largeur : viser une pastille de
   3 mm au pouce est le meilleur moyen qu'un client renonce. */
@media (max-width: 30rem) {
  .rtr-appel--flottant { left: 1rem; right: 1rem; justify-content: center; }
}

/* Un contour visible au clavier, et il ne peut pas être hérité du site :
   le critère 10.7 est précisément celui que Palier trouve manquant sur
   la majorité des sites qu'il analyse. */
.rtr-appel:focus-visible,
.rtr-panneau :focus-visible {
  outline: 3px solid #7DD3A7;
  outline-offset: 2px;
}

.rtr-appel__compte {
  display: inline-block;
  min-width: 1.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: #7DD3A7;
  color: #17181A;
  font-weight: 600;
  text-align: center;
}

/* --- Le mode « désigner un bloc » ---------------------------------------- */

/* Le curseur dit ce qui va se passer. Sans ça, le site paraît simplement
   cassé : les liens ne répondent plus et rien ne l'explique. */
.rtr-designation, .rtr-designation * { cursor: crosshair !important; }

.rtr-surbrillance {
  outline: 3px solid #7DD3A7 !important;
  outline-offset: 2px !important;
  background: rgb(125 211 167 / 0.14) !important;
}

/* La bande qui explique comment sortir du mode. Elle est en bas et non en
   haut : en haut elle recouvrirait le bandeau de maquette, donc le seul
   repère dont le client dispose. */
.rtr-consigne {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 2147483646;
  /* GROSSIE LE 19/09/2026. Elle faisait 0,85 rem de hauteur de bande, en gris
     très sombre, tout en bas d'une fenêtre de 900 pixels. Marie, qui a écrit
     ce panneau, ne l'a pas vue en essayant sa propre maquette : le panneau se
     referme, la page redevient exactement normale, et le seul signal était un
     filet qu'on prend pour le bord de l'écran.
     Deux fois plus haute, bordée d'accent, et elle entre par le bas pour que
     le mouvement attrape l'œil. */
  padding: 1.15rem 1rem;
  background: #17181A;
  color: #F7F7F5;
  border-top: 4px solid #7DD3A7;
  box-shadow: 0 -10px 30px -12px rgb(0 0 0 / 0.5);
  font: 500 1.05rem/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
  text-align: center;
  animation: rtr-monte 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes rtr-monte {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

/* Le bouton qui fait entrer en désignation. Plein et non creux : c'est le
   chemin principal depuis le 19/09/2026, et un bouton creux au-dessus d'une
   liste déroulante se lit comme une option secondaire. */
.rtr-bouton--designer {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
  padding: 0.95rem 1rem;
  background: #7DD3A7;
  color: #12331F;
  border: 0;
  border-radius: 10px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
}
.rtr-bouton--designer:hover,
.rtr-bouton--designer:focus-visible { background: #6BC496; }

.rtr-aide-designer {
  margin: 0 0 1.4rem;
  font-size: 0.9rem;
  line-height: 1.45;
  opacity: 0.75;
}

/* La liste déroulante devient le repli, donc elle s'efface un peu. */
.rtr-champ--repli { opacity: 0.8; }
.rtr-champ--repli label { font-size: 0.9rem; }

@media (prefers-reduced-motion: reduce) {
  .rtr-consigne { animation: none; }
}

.rtr-consigne kbd {
  padding: 0.1em 0.45em;
  border: 1px solid #A8ADA6;
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9em;
}

/* --- Le panneau ---------------------------------------------------------- */

.rtr-panneau {
  width: min(38rem, 100vw - 2rem);
  max-width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: #17181A;
  color: #F7F7F5;
  font: 400 1rem/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
}

.rtr-panneau::backdrop { background: rgb(0 0 0 / 0.62); }

.rtr-panneau__corps { padding: 1.5rem; }

@media (max-width: 30rem) {
  .rtr-panneau { width: 100vw; max-height: 100dvh; border-radius: 0; }
  .rtr-panneau__corps { padding: 1.1rem; }
}

.rtr-panneau h2 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  line-height: 1.25;
  color: #F7F7F5;
}

.rtr-panneau p { margin: 0 0 1rem; color: #A8ADA6; }
.rtr-panneau p:last-child { margin-bottom: 0; }

.rtr-panneau__fermer {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid #3A3D40;
  border-radius: 50%;
  background: transparent;
  color: #F7F7F5;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}

.rtr-panneau__fermer:hover { background: #26282B; }

/* --- Les champs ---------------------------------------------------------- */

.rtr-champ { margin: 0 0 1rem; }

.rtr-champ > label,
.rtr-groupe > legend {
  display: block;
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: #F7F7F5;
}

.rtr-aide {
  display: block;
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: #A8ADA6;
}

.rtr-champ input[type="text"],
.rtr-champ input[type="email"],
.rtr-champ select,
.rtr-champ textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid #494D51;
  border-radius: 8px;
  background: #0E0F11;
  color: #F7F7F5;
  font: inherit;
  font-size: 1rem;  /* jamais moins de 16px : en dessous, iOS zoome au focus */
}

.rtr-champ textarea { min-height: 6.5rem; resize: vertical; }

.rtr-champ input::placeholder,
.rtr-champ textarea::placeholder { color: #80858A; }

.rtr-groupe {
  margin: 0 0 1rem;
  padding: 0;
  border: 0;
}

.rtr-natures {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.15rem;
}

.rtr-nature {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0.7rem;
  border: 1px solid #3A3D40;
  border-radius: 8px;
  cursor: pointer;
}

.rtr-nature:hover { background: #1E2023; }

/* La case reste une vraie case cochée par le navigateur : elle est visible,
   elle porte l'état pour les technologies d'assistance, et elle se pilote au
   clavier sans une ligne de script. La remplacer par un dessin est le premier
   pas vers un composant que personne ne peut utiliser sans souris. */
.rtr-nature input { margin: 0.25rem 0 0; accent-color: #7DD3A7; }

.rtr-nature__texte { display: block; }
.rtr-nature__sous {
  display: block;
  font-size: 0.85rem;
  color: #A8ADA6;
}

.rtr-cible {
  margin: 0 0 1rem;
  padding: 0.7rem 0.8rem;
  border-left: 3px solid #7DD3A7;
  background: #1E2023;
  border-radius: 0 8px 8px 0;
  font-size: 0.92rem;
}

.rtr-cible strong { display: block; color: #F7F7F5; }
.rtr-cible span { color: #A8ADA6; }

/* --- Les boutons --------------------------------------------------------- */

.rtr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.rtr-bouton {
  padding: 0.65rem 1.1rem;
  border: 1px solid #7DD3A7;
  border-radius: 8px;
  background: #7DD3A7;
  color: #17181A;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.rtr-bouton:hover { background: #95DDB6; }

.rtr-bouton--creux {
  background: transparent;
  border-color: #494D51;
  color: #F7F7F5;
  font-weight: 400;
}

.rtr-bouton--creux:hover { background: #26282B; }

.rtr-bouton[disabled] { opacity: 0.5; cursor: not-allowed; }

/* --- La liste des demandes accumulées ------------------------------------ */

.rtr-liste {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.rtr-liste li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  padding: 0.7rem 0;
  border-top: 1px solid #2E3134;
}

.rtr-liste__corps { flex: 1 1 auto; min-width: 0; }
.rtr-liste__ou { display: block; font-size: 0.85rem; color: #A8ADA6; }
.rtr-liste__quoi { display: block; word-wrap: break-word; }

.rtr-retirer {
  flex: 0 0 auto;
  padding: 0.3rem 0.6rem;
  border: 1px solid #494D51;
  border-radius: 6px;
  background: transparent;
  color: #F7F7F5;
  font: inherit;
  font-size: 0.85rem;
  cursor: pointer;
}

.rtr-retirer:hover { background: #26282B; }

/* --- Les messages -------------------------------------------------------- */

.rtr-etat {
  margin: 1rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
  font-size: 0.95rem;
}

.rtr-etat:empty { display: none; padding: 0; }

.rtr-etat--ok    { background: #17301F; color: #B7EBCD; }
.rtr-etat--souci { background: #3A1E1E; color: #F3C9C9; }

/* --- Rien ne bouge si le visiteur ne le veut pas -------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rtr-panneau, .rtr-appel, .rtr-bouton { transition: none !important; }
}

/* --- Rien de tout ceci ne s'imprime -------------------------------------- */
/* Une maquette imprimée circule sans son adresse. Le bandeau, lui, doit
   rester à l'impression ; l'outil pour le commenter n'a aucune raison d'y
   être. */
@media print {
  .rtr-appel, .rtr-consigne, .rtr-panneau { display: none !important; }
}


/* --- La marque du mode atelier, 19/09/2026 -------------------------------- */
/* Volontairement voyante et non discrète : elle dit que les garde-fous du
   client sont levés, ce qui n'est jamais un détail. Ambre et non verte, pour
   ne pas se confondre avec le vert de la désignation. */
.rtr-atelier-marque {
  margin: 0 0 1.2rem;
  padding: 0.7rem 0.9rem;
  border-left: 4px solid #E0A85C;
  background: rgb(224 168 92 / 0.12);
  color: #F2E4CF;
  font-size: 0.88rem;
  line-height: 1.45;
  border-radius: 0 8px 8px 0;
}

/* Le bouton « Cette maquette me convient ». Creux et non plein : il ne doit
   pas se disputer l'attention avec « Demander une modification », qui reste
   l'action principale de ce panneau. */
.rtr-bouton--valide {
  display: block;
  width: 100%;
  margin: 1.2rem 0 0.5rem;
  padding: 0.85rem 1rem;
  background: transparent;
  color: #7DD3A7;
  border: 2px solid #7DD3A7;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.rtr-bouton--valide:hover,
.rtr-bouton--valide:focus-visible { background: rgb(125 211 167 / 0.12); }