/* Suivi des chiens, CIE Chiens Guides du Cœur.
   Identité reprise du site chienguide-cie.fr : prune, jaune doux, turquoise,
   titres en Sansation, texte en Open Sans. Le coin plié rappelle l'origami du logo.
   Toutes les couleurs sont ici, dans les variables ci-dessous. */

@font-face { font-family: "Sansation"; src: url("/polices/sansation-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sansation"; src: url("/polices/sansation-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/polices/open-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/polices/open-sans-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/polices/open-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("/polices/open-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;
  --papier: #ffffff;
  --encre: #222222;
  --encre-douce: #595959;
  --prune: #4a2545;
  --prune-clair: #f4eef3;
  --turquoise: #007080;        /* liens : turquoise du logo, foncé pour être lisible */
  --turquoise-logo: #00b0d0;   /* décor uniquement */
  --jaune: #ffde7f;
  --jaune-fonce: #f3c84b;
  --sur-jaune: #1a1a1a;
  --bord: #6b6570;
  --filet: #d9d2d8;
  --alerte: #a4262c;
  --alerte-clair: #fbeeee;
  --succes: #1e6b3a;
  --succes-clair: #edf6f0;
  --focus: #007080;
  --pli: 22px;
  --titres: "Sansation", "Trebuchet MS", "Segoe UI", sans-serif;
  --texte: "Open Sans", "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier: #1c151b;
    --encre: #f3eef2;
    --encre-douce: #c9bfc7;
    --prune: #e9d3e5;
    --prune-clair: #2c2029;
    --turquoise: #6fd6ea;
    --bord: #a89fa6;
    --filet: #4a3d47;
    --alerte: #ff9a9f;
    --alerte-clair: #3a1d1f;
    --succes: #8fd9a8;
    --succes-clair: #1c3023;
    --focus: #6fd6ea;
  }
}

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

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

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.55;
}

h1, h2, h3 { font-family: var(--titres); font-weight: 700; color: var(--prune); line-height: 1.2; margin: 0 0 0.6em; }
h1 { font-size: 2.1rem; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; margin-top: 2.2rem; }
h3 { font-size: 1.2rem; margin-top: 0; }

p, ul, ol, dl { margin: 0 0 1rem; }
p, li, dd { max-width: 70ch; }

a { color: var(--turquoise); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--prune); text-decoration-thickness: 0.16em; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
main:focus { outline: none; }

.masque {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.evitement {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 10;
  background: var(--jaune); color: var(--sur-jaune); padding: 0.6rem 1rem; font-weight: 700; border: 2px solid var(--sur-jaune); border-radius: 0 0 11px 11px;
}
.evitement:focus { top: 0; color: var(--sur-jaune); }

/* ---------- En-tête et menu */

.entete { background: var(--papier); border-bottom: 1px solid var(--filet); }
.entete__interieur {
  max-width: 72rem; margin: 0 auto; padding: 0.9rem 1.25rem;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
}
.marque { display: inline-flex; align-items: center; gap: 0.85rem; text-decoration: none; color: var(--encre); }
.marque:hover { color: var(--encre); }
.marque__logo { display: block; width: auto; height: 3rem; }
.marque__logo--asso { height: 3.6rem; background: #ffffff; padding: 0.2rem 0.45rem; border-radius: 4px; }
.marque__texte { display: flex; flex-direction: column; line-height: 1.15; }
.marque__nom { font-family: var(--titres); font-weight: 700; font-size: 1.45rem; color: var(--prune); }
.marque__asso { font-size: 0.9rem; color: var(--encre-douce); }
.entete__personne { margin: 0; font-size: 0.95rem; color: var(--encre-douce); }

.menu { background: #4a2545; }
.menu__liste {
  max-width: 72rem; margin: 0 auto; padding: 0 0.75rem; list-style: none;
  display: flex; flex-wrap: wrap; align-items: stretch;
}
.menu__liste li { max-width: none; display: flex; }
.menu a, .menu .bouton-lien {
  display: flex; align-items: center; padding: 0.8rem 0.95rem; color: #ffffff;
  text-decoration: none; font-family: var(--titres); font-size: 1.05rem; font-weight: 400;
}
.menu a:hover, .menu .bouton-lien:hover { text-decoration: underline; text-decoration-thickness: 0.12em; color: #ffffff; }
.menu a[aria-current="page"] {
  background: var(--jaune); color: var(--sur-jaune); font-weight: 700;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
}
.menu :focus-visible { outline-color: var(--jaune); outline-offset: -4px; }
.menu__fin { margin-left: auto; }
.menu form { display: flex; margin: 0; }
.pastille { margin-left: 0.35rem; font-family: var(--texte); font-size: 0.9rem; font-weight: 700; }

/* ---------- Contenu */

.contenu { max-width: 72rem; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
.pied { border-top: 1px solid var(--filet); }
.pied p { max-width: 72rem; margin: 0 auto; padding: 1.25rem; font-size: 0.9rem; color: var(--encre-douce); }

.fil { font-size: 0.95rem; margin-bottom: 1rem; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 0.5rem; }
.fil li + li::before { content: "/"; content: "/" / ""; margin-right: 0.5rem; color: var(--encre-douce); }
.fil [aria-current] { color: var(--encre-douce); }

/* ---------- Messages */

.message, .resume-erreurs { padding: 0.9rem 1.1rem; margin: 0 0 1.5rem; border-radius: 4px; max-width: 46rem; }
.message p { margin: 0; font-weight: 600; }
.message--succes { background: var(--succes-clair); border-left: 6px solid var(--succes); color: var(--encre); }
.message--erreur { background: var(--alerte-clair); border-left: 6px solid var(--alerte); }
.resume-erreurs { background: var(--alerte-clair); border: 3px solid var(--alerte); }
.resume-erreurs__titre { font-family: var(--titres); font-weight: 700; font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--alerte); }
.resume-erreurs ul { margin: 0; padding-left: 1.2rem; }
.resume-erreurs a { color: var(--alerte); font-weight: 600; }

/* ---------- Boutons */

.bouton {
  display: inline-block; padding: 0.6rem 1.15rem; border: 2px solid #4a2545; border-radius: 11px;
  background: var(--jaune); color: var(--sur-jaune); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.3;
}
.bouton:hover { background: var(--jaune-fonce); color: var(--sur-jaune); }
.bouton--secondaire { background: var(--papier); color: var(--prune); border-color: var(--prune); font-weight: 600; }
.bouton--secondaire:hover { background: var(--prune-clair); color: var(--prune); }
.bouton--danger { background: var(--papier); color: var(--alerte); border-color: var(--alerte); font-weight: 600; }
.bouton--danger:hover { background: var(--alerte-clair); color: var(--alerte); }
.bouton-lien {
  background: none; border: 0; padding: 0; font: inherit; color: var(--turquoise); cursor: pointer;
  text-decoration: underline; text-underline-offset: 0.15em;
}
.bouton-lien:hover { color: var(--prune); }

.actions { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.75rem 1rem; align-items: center; }
.actions li { max-width: none; }

/* ---------- Formulaires */

.formulaire { max-width: 46rem; }
.formulaire h2 { margin-top: 2.2rem; padding-top: 1.1rem; border-top: 1px solid var(--filet); }
.formulaire h2:first-of-type { margin-top: 0.5rem; }
.champ { margin: 0 0 1.4rem; padding: 0; border: 0; min-width: 0; }
.champ label, .groupe legend { display: block; font-weight: 700; margin-bottom: 0.2rem; padding: 0; }
.obligatoire { font-weight: 400; color: var(--encre-douce); }
.aide { color: var(--encre-douce); font-size: 0.97rem; margin: 0 0 0.35rem; }
.erreur { color: var(--alerte); font-weight: 700; margin: 0 0 0.35rem; }
.champ--erreur { border-left: 5px solid var(--alerte); padding-left: 0.9rem; }

.saisie {
  display: block; width: 100%; max-width: 24rem; padding: 0.5rem 0.65rem; font: inherit; color: var(--encre);
  background: var(--papier); border: 2px solid var(--bord); border-radius: 6px;
}
.saisie--tres-court { max-width: 5rem; }
.saisie--court { max-width: 11rem; }
.saisie--moyen { max-width: 24rem; }
.saisie--large { max-width: 40rem; }
textarea.saisie { resize: vertical; }
.saisie[aria-invalid="true"] { border-color: var(--alerte); border-width: 3px; }
input[type="file"] { font: inherit; max-width: 100%; }

.choix { display: flex; align-items: center; gap: 0.6rem; margin: 0.15rem 0; min-height: 2.4rem; }
.choix input { width: 1.5rem; height: 1.5rem; margin: 0; accent-color: #4a2545; flex: none; }
.choix label { font-weight: 400; margin: 0; }
.groupe:focus { outline: 3px solid var(--focus); outline-offset: 4px; }

.formulaire__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; max-width: none; }

.filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; padding: 1rem 1.1rem; margin: 0 0 1.5rem; background: var(--prune-clair); border-radius: 4px; }
.filtres label { display: block; font-weight: 700; margin-bottom: 0.2rem; }
.filtres .saisie { min-width: 14rem; }
.filtres__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; }

/* ---------- Onglets (catégories, rubriques d'un chien) */

.onglets { margin: 0 0 1.5rem; border-bottom: 2px solid var(--filet); }
.onglets ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 0.25rem; }
.onglets li { max-width: none; }
.onglets a {
  display: block; padding: 0.6rem 1rem; margin-bottom: -2px; color: var(--encre); text-decoration: none;
  font-family: var(--titres); font-size: 1.1rem; border-bottom: 5px solid transparent;
}
.onglets a:hover { border-bottom-color: var(--bord); color: var(--encre); }
.onglets a[aria-current="page"] { color: var(--prune); font-weight: 700; border-bottom-color: var(--prune); }
.onglets__nombre { font-family: var(--texte); font-size: 0.95rem; font-weight: 400; color: var(--encre-douce); }

/* ---------- Tableaux */

/* position: relative garde les textes masqués (réservés aux lecteurs d'écran) à l'intérieur du cadre qui défile. */
.tableau-cadre { position: relative; overflow-x: auto; margin: 0 0 1.5rem; }
table { border-collapse: collapse; width: 100%; font-size: 1rem; }
th, td { text-align: left; vertical-align: top; padding: 0.65rem 0.9rem 0.65rem 0; border-bottom: 1px solid var(--filet); }
thead th { font-family: var(--titres); font-weight: 700; color: var(--prune); border-bottom: 2px solid var(--prune); white-space: nowrap; }
tbody th { font-weight: 700; }
td form { margin: 0; }
.sans-coupure { white-space: nowrap; }

/* ---------- Listes d'informations */

.infos { margin: 0 0 1.25rem; max-width: 52rem; }
.infos > div { display: grid; grid-template-columns: 13rem 1fr; gap: 0.25rem 1.25rem; padding: 0.55rem 0; border-bottom: 1px solid var(--filet); }
.infos dt { font-weight: 700; color: var(--encre-douce); }
.infos dd { margin: 0; }
.infos dd ul { margin: 0; }
.infos dd .aide { margin: 0.25rem 0 0; }
.infos--encadre { background: var(--prune-clair); padding: 0.5rem 1.1rem; border-radius: 4px; max-width: 36rem; }
.infos--encadre > div:last-child { border-bottom: 0; }
.code-secret { font-family: "Cascadia Mono", Consolas, "Courier New", monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: 0.06em; }

.liste-simple { padding-left: 1.2rem; }
.liste-simple li { margin-bottom: 0.35rem; }

/* ---------- Fiche chien : le seul endroit où le pli d'origami prend de la place */

.fiche-tete { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 2rem; margin: 0 0 1.75rem; }
.fiche-tete h1 { font-size: 3rem; margin: 0 0 0.2rem; }
.fiche-tete__resume { font-size: 1.15rem; margin: 0 0 0.6rem; }
.fiche-tete__texte p:last-child { margin-bottom: 0; }

.portrait {
  display: block; width: 7.5rem; height: 7.5rem; object-fit: cover; background: var(--prune-clair); flex: none;
  clip-path: polygon(0 0, calc(100% - var(--pli)) 0, 100% var(--pli), 100% 100%, 0 100%);
}
.portrait--grand { width: 13.75rem; height: 13.75rem; --pli: 40px; }
.portrait--vide {
  display: flex; align-items: center; justify-content: center; background: #4a2545; color: var(--jaune);
  font-family: var(--titres); font-weight: 700; font-size: 3.5rem; line-height: 1;
}
.portrait--vide.portrait--grand { font-size: 6.5rem; }

.etiquette {
  display: inline-block; padding: 0.35rem 1.4rem 0.35rem 0.8rem; background: var(--prune-clair); color: var(--prune);
  font-weight: 700; border-left: 6px solid var(--turquoise-logo);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
}
.etiquette--reforme, .etiquette--retraite, .etiquette--decede { border-left-color: var(--bord); }

/* ---------- Accueil */

.compteurs { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; max-width: 56rem; margin-bottom: 1.5rem; }
.compteurs li { max-width: none; }
.compteurs a {
  display: flex; flex-direction: column; padding: 1rem 1.2rem 1.1rem; height: 100%; text-decoration: none;
  background: var(--prune-clair); color: var(--encre);
  clip-path: polygon(0 0, calc(100% - var(--pli)) 0, 100% var(--pli), 100% 100%, 0 100%);
}
.compteurs a:hover { background: var(--jaune); color: var(--sur-jaune); }
.compteurs a:hover .compteurs__nombre { color: var(--sur-jaune); }
.compteurs a:focus-visible { outline-offset: -3px; }
.compteurs__nombre { font-family: var(--titres); font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--prune); }
.compteurs__libelle { font-weight: 600; margin-top: 0.3rem; }

.chiens-famille { list-style: none; padding: 0; max-width: 46rem; }
.carte-chien { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--filet); max-width: none; }
.carte-chien h3 { font-size: 1.6rem; margin: 0 0 0.2rem; }
.carte-chien p { margin: 0 0 0.3rem; }
.carte-chien .actions { margin: 0.6rem 0 0; }

/* ---------- Rapport de la famille, grille de progression, réglages */

.formulaire--rapport, .formulaire--grille { max-width: 52rem; }
.formulaire--rapport h3 { margin: 1.6rem 0 0.6rem; font-size: 1.15rem; }
.point { border: 0; border-bottom: 1px solid var(--filet); margin: 0; padding: 0.9rem 0 1rem; min-width: 0; }
.point legend { font-weight: 700; padding: 0; margin-bottom: 0.25rem; float: left; width: 100%; }
.point legend + * { clear: left; }
.point:focus { outline: 3px solid var(--focus); outline-offset: 2px; }
.reponses { display: flex; flex-wrap: wrap; gap: 0 1.4rem; clear: left; }
.point__precisions { margin-top: 0.4rem; }
.point__precisions label { display: block; font-size: 0.97rem; color: var(--encre-douce); margin-bottom: 0.15rem; }
.groupe-grille { border: 0; border-top: 1px solid var(--filet); margin: 0 0 1rem; padding: 1rem 0 0; min-width: 0; }
.groupe-grille legend { font-family: var(--titres); font-weight: 700; font-size: 1.15rem; color: var(--prune); padding: 0; margin-bottom: 0.6rem; }
.groupe-grille .champ { margin-bottom: 0.9rem; }
caption { text-align: left; font-family: var(--titres); font-weight: 700; font-size: 1.1rem; color: var(--prune); padding: 0.4rem 0; }
.actions--serrees { gap: 0.25rem 0.9rem; margin: 0; }
.actions--serrees form { margin: 0; }
.texte-libre { max-width: 70ch; }
.texte-email { white-space: pre-wrap; font-family: var(--texte); font-size: 1rem; background: var(--prune-clair); padding: 1rem 1.2rem; max-width: 70ch; border-radius: 4px; }
.consigne { padding: 0.6rem 0 0.4rem; border-bottom: 1px solid var(--filet); max-width: 52rem; }
.consigne h3 { margin: 0 0 0.2rem; font-size: 1.1rem; }
.titre-discret { font-family: var(--titres); font-size: 1.05rem; color: var(--prune); margin: 0.9rem 0 0.3rem; }
.liste-actions li { margin-bottom: 0.8rem; }
.liste-actions .bouton { margin-left: 0.4rem; }

/* ---------- Notifications, pagination */

.notifications { list-style: none; padding: 0; max-width: 46rem; }
.notification { padding: 0.8rem 0 0.8rem 1rem; border-bottom: 1px solid var(--filet); border-left: 6px solid transparent; max-width: none; }
.notification--nouvelle { border-left-color: var(--turquoise-logo); background: var(--prune-clair); }
.notification p { margin: 0; }
.notification__titre { font-weight: 600; }
.notification__date { font-size: 0.93rem; color: var(--encre-douce); }
.notification form { margin: 0.3rem 0 0; }

.pagination ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }

/* ---------- Téléphone */

@media (max-width: 40rem) {
  body { font-size: 1.0625rem; }
  h1 { font-size: 1.75rem; }
  .fiche-tete h1 { font-size: 2.3rem; }
  .contenu { padding: 1.25rem 1rem 2.5rem; }
  .entete__interieur { padding: 0.75rem 1rem; }
  .menu__liste { padding: 0 0.25rem; }
  .menu a, .menu .bouton-lien { padding: 0.75rem 0.7rem; }
  .menu__fin { margin-left: 0; }
  .infos > div { grid-template-columns: 1fr; gap: 0; }
  .portrait--grand { width: 9rem; height: 9rem; --pli: 28px; }
  .portrait--vide.portrait--grand { font-size: 4.5rem; }
  .saisie, .saisie--moyen, .saisie--large { max-width: 100%; }
  .filtres .saisie { min-width: 0; }
  .filtres__champ { width: 100%; }
  .bouton { padding: 0.7rem 1.1rem; }
}

@media (forced-colors: active) {
  .menu a[aria-current="page"], .onglets a[aria-current="page"] { outline: 2px solid CanvasText; outline-offset: -4px; }
  .portrait, .etiquette, .compteurs a, .menu a[aria-current="page"] { clip-path: none; }
  .bouton { border-color: ButtonText; }
}

@media print {
  .menu, .evitement, .pied, .bouton, .filtres, .actions { display: none; }
  body { font-size: 11pt; }
  a { color: inherit; text-decoration: none; }
}