/*
 * Avis des visiteurs — charte d'interface de Vincent : cartes blanches bordées, cases-boutons arrondies à 4 px (charte B du 17/10/2026)
 * (jamais de pilule), couleur d'action par variable (Bleu Dordogne par défaut), mode clair uniquement.
 */
.av-form, .av-carte, .av-merci {
  --av-action: #3261A3;
  --av-action-survol: #28508A;
  --av-action-doux: #EAF1FA;
  --av-encre: #17191B;
  --av-texte: #26292C;
  --av-gris: #5B6470;
  --av-aide: #8A9096;
  --av-trait: #E4E6E7;
  --av-trait-pale: #F0F1F1;
  --av-rouge: #B03A3A;
  --av-vert: #2F9E6E;
}
.av-page { max-width: 640px; margin: 0 auto; padding: 20px 16px 18px; background: #fff; border: 1px solid #E4E6E7; border-radius: 4px; box-shadow: 0 1px 2px rgba(23, 25, 27, .04); box-sizing: border-box; }
@media (min-width: 640px) { .av-page { padding: 26px 30px 24px; } }
.av-form { color: var(--av-texte); }
.av-form *, .av-carte * { box-sizing: border-box; }
.av-bloc { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
.av-bloc legend, .av-bloc > label { display: block; padding: 0; margin: 0 0 7px; font-size: 12px; font-weight: 600; color: var(--av-gris); }
.av-bloc small { font-weight: 400; color: var(--av-aide); }

/* Impression : cinq cases côte à côte, chiffre et mot */
.av-notes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.av-idees { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 6px; }
.av-case { display: block; margin: 0; cursor: pointer; }
.av-case input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.av-case span {
  display: flex; align-items: center; gap: 8px; min-height: 40px; height: 100%; padding: 8px 12px;
  font-size: .88rem; font-weight: 500; line-height: 1.25; color: var(--av-encre);
  background: #fff; border: 1px solid var(--av-trait); border-radius: 4px;
  transition: border-color .15s, background .15s, transform .15s, box-shadow .15s;
}
.av-notes .av-case span { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 4px; font-size: .72rem; font-weight: 500; color: var(--av-gris); text-align: center; }
.av-notes .av-case b { font-size: 1.05rem; font-weight: 700; color: var(--av-encre); }
.av-case-coche span::before {
  content: ""; flex: none; width: 15px; height: 15px; border: 1.5px solid #B9C0C4; border-radius: 4px; background: #fff;
  transition: background .15s, border-color .15s;
}
.av-case:hover span { border-color: #CDD2D4; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(23, 25, 27, .07); }
.av-case input:focus-visible + span { border-color: var(--av-action); box-shadow: 0 0 0 3px rgba(50, 97, 163, .18); }
.av-case input:checked + span { background: var(--av-action-doux); border-color: var(--av-action); color: var(--av-encre); }
.av-notes .av-case input:checked + span b { color: var(--av-action); animation: av-claque .28s cubic-bezier(.3, 1.6, .5, 1); }
.av-case-coche input:checked + span::before {
  border-color: var(--av-action); animation: av-claque .28s cubic-bezier(.3, 1.6, .5, 1);
  background: var(--av-action) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M1.5 5.2l3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 10px;
}
@keyframes av-claque { from { transform: scale(.6); } to { transform: scale(1); } }

.av-form textarea, .av-form input[type="email"] {
  display: block; width: 100%; min-height: 44px; padding: 10px 12px; margin: 0;
  font: inherit; font-size: 1rem; color: var(--av-encre); background: #fff;
  border: 1px solid var(--av-trait); border-radius: 4px; box-shadow: none; transition: border-color .15s, box-shadow .15s;
}
.av-form textarea { resize: vertical; field-sizing: content; min-height: 76px; }
.av-form textarea:focus, .av-form input[type="email"]:focus { outline: none; border-color: var(--av-action); box-shadow: 0 0 0 3px rgba(50, 97, 163, .18); }
.av-pot { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.av-mention { margin: 0 0 12px; font-size: 12px; color: var(--av-aide); }
.av-mention a { color: var(--av-gris); }
.av-actions { display: flex; justify-content: flex-end; padding-top: 14px; border-top: 1px solid var(--av-trait-pale); }
.av-envoyer, .av-ouvrir {
  min-height: 44px; padding: 10px 20px; border: 1px solid var(--av-action); border-radius: 4px; background: var(--av-action);
  color: #fff; font: inherit; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .2s, transform .2s, box-shadow .2s, opacity .2s;
}
.av-envoyer:hover, .av-ouvrir:hover { background: var(--av-action-survol); border-color: var(--av-action-survol); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(23, 25, 27, .07); }
.av-envoyer.av-envoi { opacity: .6; pointer-events: none; }
.av-erreur { margin: 10px 0 0; font-size: 12.5px; font-weight: 600; color: var(--av-rouge); }
.av-erreur[hidden] { display: none; }

.av-merci { text-align: center; padding: 14px 4px 6px; color: var(--av-texte); }
.av-merci[hidden] { display: none; }
.av-merci svg { display: block; width: 52px; height: 52px; margin: 0 auto 8px; }
.av-merci circle { fill: none; stroke: var(--av-vert); stroke-width: 2; opacity: .25; }
.av-merci path { fill: none; stroke: var(--av-vert); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.av-merci.av-visible path { animation: av-coche .5s .15s cubic-bezier(.2, .7, .2, 1) forwards; }
@keyframes av-coche { to { stroke-dashoffset: 0; } }
.av-merci h3 { margin: 0 0 4px; font-size: 1.15rem; color: var(--av-encre); }
.av-merci p { margin: 0; font-size: .9rem; color: var(--av-gris); }

/* Carte discrète en bas à droite (en bas, pleine largeur, sur téléphone) */
.av-carte {
  position: fixed; z-index: 990; right: 20px; bottom: 20px; width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 40px); overflow: auto;
  padding: 14px 16px; background: #fff; border: 1px solid var(--av-trait); border-radius: 4px;
  box-shadow: 0 18px 50px rgba(23, 25, 27, .16); color: var(--av-texte); font-size: 15px;
  opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .3s cubic-bezier(.2, .7, .2, 1), transform .3s cubic-bezier(.2, .7, .2, 1), width .3s;
}
.av-carte.av-visible { opacity: 1; transform: none; }
.av-carte.av-ouverte { width: 440px; }
@media (max-width: 560px) {
  .av-carte { left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; }
  .av-carte.av-ouverte { width: auto; }
}
.av-carte-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.av-carte-tete p { margin: 0; display: grid; gap: 2px; }
.av-carte-tete strong { font-size: .98rem; font-weight: 700; color: var(--av-encre); letter-spacing: -.01em; }
.av-carte-tete span { font-size: .85rem; color: var(--av-gris); }
.av-fermer { flex: none; display: grid; place-items: center; width: 30px; height: 30px; margin: -4px -6px 0 0; padding: 0; border: 1px solid transparent; border-radius: 4px; background: none; color: var(--av-gris); cursor: pointer; transition: background .15s, border-color .15s; }
.av-fermer:hover { background: var(--av-trait-pale); border-color: var(--av-trait); }
.av-fermer svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.av-carte-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.av-carte-actions[hidden], .av-carte-corps[hidden] { display: none; }
.av-ouvrir { min-height: 40px; padding: 8px 16px; font-size: .9rem; }
.av-plus-tard { padding: 8px 4px; border: 0; background: none; font: inherit; font-size: .9rem; font-weight: 600; color: var(--av-gris); cursor: pointer; }
.av-plus-tard:hover { color: var(--av-encre); }
.av-carte-corps { margin-top: 14px; animation: av-monte .3s cubic-bezier(.2, .7, .2, 1) both; }
.av-carte .av-notes .av-case span { font-size: .68rem; }
@keyframes av-monte { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .av-form *, .av-form *::before, .av-carte, .av-carte *, .av-merci * { animation: none !important; transition: none !important; }
  .av-merci path { stroke-dashoffset: 0; }
}