/* ==================================================================
   KAPTIA — FEUILLE UNIQUE
   Charte applicative claude.ai : fond ivoire chaud, un seul accent,
   serif editoriale pour les titres, ombres quasi absentes, hierarchie
   portee par l'espace et le contraste.

   SEUL FICHIER DU PROJET OU UNE COULEUR S'ECRIT EN HEXADECIMAL, avec
   _css/theme.php — qui n'emet, lui, que le :root de surcharge lu en
   base. Partout ailleurs : var(--…).
   ================================================================== */

:root {
  --fond:          #faf9f5;
  --fond-creuse:   #f0eee6;
  --carte:         #ffffff;
  --encre:         #141413;
  --encre-douce:   #6b6960;
  /* Texte d'invite des champs. Le gris clair habituel (#a8a49a) donne
     2,49:1 sur blanc — moins de la moitie du seuil AA. Celui-ci passe
     sur les DEUX fonds du service : 4,76:1 sur blanc, 4,51:1 sur creme. */
  --encre-invite:  #777367;
  --bordure:       #e6e3da;
  --bordure-appuyee: #d6d1c4;

  /* ACCENT — surchargeable par theme.php depuis kap_config.
     Le bleu de Facebook (#0866FF, version 2023). Il passe le seuil AA
     du RGAA tel quel : 4,82:1 avec du texte blanc, mesure. C'est pour
     cela que c'est celui-la et non le #1877F2 des annees precedentes,
     qui tombe a 4,26:1 et devrait etre assombri.
     Les trois declinaisons sont celles que theme.php calculerait :
     -6 points de luminosite pour le fonce, luminosite CIBLE de 0,93
     pour le doux et 0,85 pour la bordure. */
  --accent:        #0866FF;
  --accent-fonce:  #0058e8;
  --accent-doux:   #e3ebf7;
  --accent-bordure:#c0d3f2;

  --vert:          #2f6b4f;
  --vert-doux:     #e3efe8;
  --ambre:         #8a6410;
  --ambre-doux:    #f6ecd4;
  --rouge:         #9a3324;
  --rouge-doux:    #f6e0dc;

  --voile:         rgba(20, 20, 19, 0.45);

  /* Polices du SYSTEME, jamais un CDN : une Google Font chargee depuis
     fonts.gstatic.com envoie l'adresse IP de chaque visiteur a un tiers
     (regle 10d). Surchargeables par theme.php. */
  --police-titre: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --police-corps: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, "Helvetica Neue", Arial, sans-serif;

  --rayon:    12px;
  --rayon-xl: 20px;

  /* Largeur du menu de gauche. Le calcul du contenu la reprend :
     la changer ICI suit partout. */
  --rail: 240px;

  /* Largeur des pages PUBLIQUES : vitrine, connexion, mentions.
     ELLES LA PARTAGENT TOUTES. Les pages CONNECTEES, elles, n'ont
     aucune borne : une page d'admin occupe toute la largeur (regle
     11d), et ce sont les CHAMPS qu'on borne, jamais la page. */
  --largeur-front: 1080px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font: 400 16px/1.65 var(--police-corps);
}

img { max-width: 100%; height: auto; }

h1, h2, h3 { font-family: var(--police-titre); font-weight: 400; line-height: 1.25; }
h1 { font-size: clamp(28px, 4vw, 40px); margin: 0 0 16px; }
h2 { font-size: clamp(22px, 3vw, 28px); margin: 40px 0 14px; }
h3 { font-size: 19px; margin: 0 0 8px; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent-fonce); }

/* FOCUS VISIBLE — jamais « outline: none » sans remplacement.
   Un focus invisible rend le site inutilisable au clavier, et le defaut
   ne se voit sur aucune capture d'ecran. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.lien-evitement {
  position: absolute; left: -9999px; top: 0;
  background: var(--encre); color: var(--fond);
  padding: 12px 18px; z-index: 100; border-radius: 0 0 var(--rayon) 0;
}
.lien-evitement:focus { left: 0; }

.visuellement-cache {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Le leurre anti-robot : masque EN CSS, jamais par un style en ligne
   que la CSP refuserait — et son echec serait silencieux. */
.leurre { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ==================================================================
   1. LA MARQUE ET LES BARRES
   ================================================================== */
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); }
.marque__pastille {
  width: 22px; height: 22px; border-radius: 7px;
  background: var(--accent); flex: none;
}
.marque__nom { font-family: var(--police-titre); font-size: 20px; }

.vitrine__barre, .app__barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 18px 24px;
  border-bottom: 1px solid var(--bordure);
  background: var(--fond);
}
.vitrine__barre { max-width: var(--largeur-front); margin: 0 auto; }
.vitrine__actions { margin: 0; display: flex; gap: 10px; }

/* ==================================================================
   2. LES BOUTONS — tons derives de l'accent (regle 11c)
   Chaque ton se definit par trois variables locales que .bouton
   consomme. Ajouter un ton = ajouter trois variables, jamais reecrire
   une regle de bouton.
   ================================================================== */
.bouton {
  --ton: var(--accent);
  --ton-fonce: var(--accent-fonce);
  --ton-doux: var(--accent-doux);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 500 15px/1 var(--police-corps);
  padding: 12px 20px; border-radius: var(--rayon);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; background: var(--carte); color: var(--encre);
  transition: background .15s, border-color .15s;
}
.bouton--primaire { background: var(--ton); color: #ffffff; }
.bouton--primaire:hover { background: var(--ton-fonce); color: #ffffff; }
.bouton--secondaire { background: transparent; border-color: var(--bordure-appuyee); }
.bouton--secondaire:hover { border-color: var(--ton); color: var(--ton-fonce); }
.bouton--discret { background: transparent; border-color: transparent; color: var(--encre-douce); }
.bouton--discret:hover { color: var(--ton-fonce); background: var(--ton-doux); }
.bouton--large { width: 100%; }
.bouton--grand { padding: 15px 28px; font-size: 16px; }

.bouton-vert  { --ton: var(--vert);  --ton-doux: var(--vert-doux); }
.bouton-rouge { --ton: var(--rouge); --ton-doux: var(--rouge-doux); }
.bouton-jaune { --ton: var(--ambre); --ton-doux: var(--ambre-doux); }

/* ==================================================================
   3. LA VITRINE
   ================================================================== */
.vitrine main, .portail__seul { max-width: var(--largeur-front); margin: 0 auto; padding: 0 24px 80px; }

/* AUCUNE LARGEUR MAXIMALE ICI, et c'est le point.
   Le conteneur (.vitrine main) borne deja tout a --largeur-front. Une
   seconde borne posee sur le hero et les sections les rendait plus
   etroits que la BARRE DU HAUT, qui, elle, suit le conteneur : on
   voyait la marque et le bouton depasser le texte a droite, et deux
   blocs de largeurs differentes ne se lisent pas comme une meme page.
   C'est exactement ce que dit la regle 11d — ce sont les CHAMPS et les
   LIGNES DE TEXTE qu'on borne, jamais le bloc. */
.vitrine__hero { padding: 72px 0 48px; }
.vitrine__hero h1 em { font-style: italic; color: var(--accent); }
.vitrine__cta { margin: 32px 0 12px; }
.vitrine__mention { font-size: 14px; color: var(--encre-douce); margin: 0; }

/* Le chapo tient la largeur SANS faire des lignes de 120 caracteres :
   deux colonnes plutot qu'un paragraphe etale. La mesure reste autour
   de 55 signes, celle qui se lit sans perdre la ligne. */
.vitrine__chapo { font-size: 18px; color: var(--encre-douce); margin: 0 0 16px; }
.vitrine__chapos { display: grid; gap: 0 40px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .vitrine__chapos { grid-template-columns: 1fr 1fr; } }

.vitrine__section { padding: 40px 0; border-top: 1px solid var(--bordure); }
/* UN PARAGRAPHE NE SE BORNE PAS, IL SE PARTAGE.
   Le borner a 68 signes laissait la moitie droite de la section vide,
   ce qui est le defaut qu'on corrigeait. L'etaler sur 1030 px donnerait
   des lignes de cent trente caracteres, ou l'oeil perd le retour a la
   ligne. Deux colonnes resolvent les deux : la section remplit la
   largeur, la mesure reste autour de 55 signes. */
.vitrine__colonnes { display: grid; gap: 0 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .vitrine__colonnes { grid-template-columns: 1fr 1fr; } }

/* La FAQ occupe elle aussi toute la largeur : un depliant a demi-page
   dans une section pleine se lit comme une erreur de mise en page. */
.vitrine__faq summary::marker { color: var(--accent); }

/* Les etapes se rangent en deux colonnes des qu'il y a la place :
   quatre etapes empilees sur 1080 px laissent la moitie droite vide. */
.vitrine__etapes { list-style: none; counter-reset: etape; padding: 0; margin: 24px 0 0;
                   display: grid; gap: 0 48px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .vitrine__etapes { grid-template-columns: 1fr 1fr; } }
.vitrine__etapes li { counter-increment: etape; position: relative; padding: 0 0 28px 56px; }
.vitrine__etapes li::before {
  content: counter(etape, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--police-titre); font-size: 20px; color: var(--accent);
}
.vitrine__etapes p { margin: 0; color: var(--encre-douce); }

/* ---------- LES CARTES ----------
   Meme boite que les cartes de l'application (.carte) : un seul
   vocabulaire pour tout le site. La grille s'adapte au nombre de
   cartes, sans classe a choisir a la main — « auto-fit » plie de
   lui-meme sous 900 px. */
.cartes {
  display: grid; gap: 20px; margin: 28px 0 0;
  /* 400 px de largeur minimale, et non 260 : dans un conteneur de
     1030 px, 260 donnait TROIS colonnes — donc, pour quatre cartes,
     une rangee de trois et une carte seule avec un vide a cote. 400
     donne deux colonnes, soit un 2x2 franc, et laisse la grille
     s'ouvrir d'elle-meme si le conteneur s'elargit un jour.
     « min(100%, 400px) » evite le debordement lateral sous 400 px. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
}
.carte-v {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 22px 22px 24px;
  transition: border-color .15s, transform .15s;
}
.carte-v:hover { border-color: var(--accent-bordure); transform: translateY(-2px); }
.carte-v h3 { margin: 0 0 8px; font-size: 17px; }
.carte-v p  { margin: 0; color: var(--encre-douce); font-size: 15px; }
.carte-v__numero {
  display: block; font-family: var(--police-titre);
  font-size: 20px; color: var(--accent); line-height: 1; margin: 0 0 12px;
}

/* La carte d'un niveau de confidentialite porte un filet de couleur en
   tete. LA COULEUR N'EST JAMAIS SEULE : la pastille qui la surmonte
   dit le niveau en toutes lettres (regle 10e). */
.carte-v--niveau { border-top: 3px solid var(--bordure); }
.carte-v--vert   { border-top-color: var(--vert); }
.carte-v--ambre  { border-top-color: var(--ambre); }
.carte-v--rouge  { border-top-color: var(--rouge); }

/* ---------- LES ETIQUETTES ---------- */
.etiquettes { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; }
.etiquettes li {
  padding: 6px 14px; background: var(--fond-creuse);
  border-radius: 999px; font-size: 14px;
}

/* ---------- LA FAQ ----------
   Des lignes separees par un filet, pas des cartes : une question
   repliee est une ligne, et cinq cartes vides feraient un damier. */
.faq { border-top: 1px solid var(--bordure); margin: 28px 0 0; }
.faq__item { border-bottom: 1px solid var(--bordure); }
.faq__question {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 0; cursor: pointer; font-weight: 600; font-size: 16px;
  list-style: none;                      /* Firefox */
}
.faq__question::-webkit-details-marker { display: none; }
/* Le chevron est dessine en CSS, pas en caractere : un « ▶ » change de
   dessin d'une police a l'autre et ne tourne pas. */
.faq__question::before {
  content: ''; flex: none; margin-top: 6px;
  width: 8px; height: 8px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg); transition: transform .2s;
}
.faq__item[open] .faq__question::before { transform: rotate(45deg); }
.faq__reponse { margin: 0 0 18px; padding-left: 20px; color: var(--encre-douce); }

/* ==================================================================
   4. LE PORTAIL (connexion, verification, depannage)
   ================================================================== */
.portail__duo {
  max-width: var(--largeur-front); margin: 0 auto;
  padding: 48px 24px 80px;
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
/* La carte est PREMIERE dans le document ; c'est la grille qui la
   place a droite sur grand ecran. Sur telephone, elle doit se trouver
   avant le texte, pas derriere quatre cents pixels d'explications. */
@media (min-width: 900px) {
  .portail__duo { grid-template-columns: 1fr 420px; }
  .portail__carte { grid-column: 2; grid-row: 1; }
  .portail__texte { grid-column: 1; grid-row: 1; }
}

.portail__carte {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl); padding: 32px;
}
.portail__carte--large { max-width: none; }
.portail__carte h1 { font-size: 26px; }
.portail__note { font-size: 14px; color: var(--encre-douce); margin: 16px 0 0; }
.portail__texte h2 { margin-top: 0; }
.portail__texte p { color: var(--encre-douce); }

.onglets { display: flex; gap: 4px; margin: 0 0 24px; border-bottom: 1px solid var(--bordure); }
.onglets__item {
  padding: 10px 14px; text-decoration: none; color: var(--encre-douce);
  border-bottom: 2px solid transparent; font-size: 15px;
}
.onglets__item--actif { color: var(--encre); border-bottom-color: var(--accent); }

.champ { margin: 0 0 18px; }
.champ label { display: block; font-size: 14px; margin: 0 0 6px; color: var(--encre-douce); }
/* LES CASES A COCHER SONT EXCLUES, et c'est necessaire.
   « .champ input » sans exception donnait « width: 100% » a une case a
   cocher : elle s'etirait sur toute la largeur du champ, poussait son
   libelle a l'extreme droite et le faisait s'ecouler un mot par ligne.
   Le defaut ne se voit ni au lint ni dans le DOM — seulement a l'oeil. */
.champ input:not([type="checkbox"]):not([type="radio"]),
.champ select, .champ textarea {
  width: 100%; padding: 12px 14px; font: inherit;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--bordure-appuyee); border-radius: var(--rayon);
}
.champ input::placeholder { color: var(--encre-invite); }
.champ input:hover { border-color: var(--accent-bordure); }

.alerte { padding: 12px 16px; border-radius: var(--rayon); margin: 0 0 20px; font-size: 15px; }
.alerte--erreur { background: var(--rouge-doux); color: var(--rouge); }
.alerte--succes { background: var(--vert-doux);  color: var(--vert); }
.alerte--info   { background: var(--fond-creuse); color: var(--encre-douce); }

.pastille {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500;
}
.pastille--vert  { background: var(--vert-doux);  color: var(--vert); }
.pastille--rouge { background: var(--rouge-doux); color: var(--rouge); }
.pastille--ambre { background: var(--ambre-doux); color: var(--ambre); }
/* Neutre : une mention de service, pas un etat. Sert a dire au
   proprietaire qu'un questionnaire est sur invitation. Sans fond, une
   pastille ne se lit pas comme une pastille. */
.pastille--neutre { background: var(--fond-creuse); color: var(--encre-douce); }
/* Dans une carte de niveau, la pastille est le sur-titre : elle se
   detache du titre qui la suit. */
.carte-v .pastille { display: inline-block; margin: 0 0 12px; }

.secours__message { border-top: 1px solid var(--bordure); padding: 20px 0; }
.secours__entete { font-size: 14px; color: var(--encre-douce); margin: 0 0 4px; }
.secours__sujet { font-weight: 500; margin: 0 0 10px; }
.secours__corps {
  background: var(--fond-creuse); padding: 14px; border-radius: var(--rayon);
  font-size: 13px; white-space: pre-wrap; word-break: break-word; margin: 0;
}

/* ==================================================================
   5. LE SHELL APPLICATIF — barre laterale + contenu
   ================================================================== */
.app__corps { display: block; }

.rail {
  background: var(--fond-creuse);
  border-right: 1px solid var(--bordure);
  padding: 24px 16px 40px;
}
.rail__mission {
  font-family: var(--police-titre); font-size: 17px;
  margin: 0 0 24px; padding: 0 8px;
}
.rail__titre {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--encre-douce); margin: 24px 0 8px; padding: 0 8px;
}
.rail__liste { list-style: none; margin: 0; padding: 0; }
.rail__lien {
  display: block; padding: 8px 10px; border-radius: 8px;
  color: var(--encre); text-decoration: none; font-size: 15px;
  /* Le menu est assez large pour qu'un libelle tienne sur UNE ligne :
     ni troncature, ni retour a la ligne (regle 11i). */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rail__lien:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.rail__lien--actif { background: var(--accent-doux); color: var(--accent-fonce); font-weight: 500; }
.rail__vide { display: block; padding: 8px 10px; font-size: 14px; color: var(--encre-douce); }

/* Le repli sous 900px est en CSS PUR : une case a cocher masquee et
   son label. Aucun handler en ligne — la CSP les bloque, et le menu
   mourrait en silence sur tous les telephones. */
.rail__poignee {
  display: block; margin: 12px 24px; padding: 10px 14px;
  border: 1px solid var(--bordure-appuyee); border-radius: var(--rayon);
  cursor: pointer; font-size: 15px; background: var(--carte);
}
.rail__bascule:not(:checked) ~ .app__corps .rail { display: none; }

@media (min-width: 900px) {
  .rail__poignee { display: none; }
  .app__corps { display: grid; grid-template-columns: var(--rail) 1fr; }
  /* min-width: 0 — SANS LUI, un enfant en nowrap fait grossir la
     colonne au lieu de couper : la page deborde lateralement et
     l'ellipse ne sort jamais. Le defaut ne se voit pas sur un ecran
     de bureau, il se mesure. */
  .app__contenu { min-width: 0; }
  .rail { display: block; min-height: calc(100vh - 70px); }
}

/* UNE PAGE CONNECTEE OCCUPE TOUTE LA LARGEUR (regle 11d).
   Aucune borne ici : ce sont les CHAMPS qu'on borne, via .fiche. */
.app__contenu { padding: 32px 24px 80px; }
.page__titre { margin-top: 0; }
.page__chapo { font-size: 17px; color: var(--encre-douce); max-width: 70ch; }
.fiche { max-width: 640px; }

/* ==================================================================
   6. CARTES ET GRILLES
   ================================================================== */
.carte {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon-xl); padding: 24px;
}
.carte h2 { margin-top: 0; }
.carte__sur-titre {
  font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--encre-douce); margin: 0 0 8px;
}
.carte--action { border-left: 3px solid var(--accent); margin: 0 0 24px; }
.carte--attention { border-left: 3px solid var(--ambre); background: var(--ambre-doux); }

.carte--chiffre { display: block; text-decoration: none; color: var(--encre); }
.carte--chiffre:hover { border-color: var(--accent-bordure); }
.carte__chiffre {
  display: block; font-family: var(--police-titre);
  font-size: 40px; line-height: 1; color: var(--accent);
}
.carte__legende { display: block; font-size: 14px; color: var(--encre-douce); margin-top: 8px; }

.grille { display: grid; gap: 20px; grid-template-columns: 1fr; margin: 0 0 32px; }
@media (min-width: 900px) {
  .grille-3   { grid-template-columns: repeat(3, 1fr); }
  .grille-1-1 { grid-template-columns: repeat(2, 1fr); }
  .grille-1-2 { grid-template-columns: 1fr 2fr; }
  .grille-2-1 { grid-template-columns: 2fr 1fr; }
}

.lignes { list-style: none; counter-reset: ligne; padding: 0; }
.lignes li { counter-increment: ligne; position: relative; padding: 0 0 28px 52px; }
.lignes li::before {
  content: counter(ligne, decimal-leading-zero);
  position: absolute; left: 0; top: 2px;
  font-family: var(--police-titre); font-size: 18px; color: var(--accent);
}
.lignes p { margin: 0 0 6px; color: var(--encre-douce); }

/* ==================================================================
   7. LA FRISE — portee du bloc « timeline » du site ECSplicite
   Filet vertical, pastilles, cartes a bordure haute coloree, annee en
   serif. Alternance gauche/droite au-dessus de 860px, colonne unique
   avec rail a gauche en dessous.

   L'ALTERNANCE SE CALCULE APRES LE FILTRAGE DES DROITS, jamais sur
   l'indice de boucle : deux personnes ne voient pas les memes jalons,
   et un jalon masque ferait basculer tous les suivants du mauvais cote.
   ================================================================== */
.tl { position: relative; max-width: 980px; margin: 0 auto; }
.tl::before {
  content: ''; position: absolute; top: 6px; bottom: 6px; left: 27px; width: 2px;
  background: linear-gradient(var(--accent), var(--bordure));
}
.tl-item { position: relative; padding: 0 0 40px 76px; }
.tl-item:last-child { padding-bottom: 0; }

.tl-dot {
  position: absolute; left: 0; top: 0; width: 56px; height: 56px; border-radius: 50%;
  background: var(--carte); border: 2px solid var(--accent);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  z-index: 2;
}
.tl-dot svg { width: 56%; height: 56%; }

.tl-card {
  background: var(--carte); border: 1px solid var(--bordure);
  border-top: 3px solid var(--accent); border-radius: var(--rayon);
  padding: 18px 22px;
  transition: transform .2s, border-color .2s;
}
.tl-card:hover { transform: translateY(-4px); border-color: var(--accent-bordure); }
.tl-year { font-family: var(--police-titre); font-size: 22px; color: var(--accent); line-height: 1; }
.tl-title { font-size: 17px; font-weight: 600; font-family: var(--police-corps); margin: 6px 0 8px; }
.tl-text { font-size: 14.5px; color: var(--encre-douce); }
.tl-text p { margin: 0 0 8px; }
.tl-text p:last-child { margin-bottom: 0; }

@media (min-width: 860px) {
  .tl::before { left: 50%; transform: translateX(-1px); }
  .tl-item { width: 50%; padding: 0 0 52px; }
  .tl-item.left  { left: 0;   padding-right: 52px; text-align: right; }
  .tl-item.right { left: 50%; padding-left: 52px; }
  .tl-item.left  .tl-dot { right: -28px; left: auto; }
  .tl-item.right .tl-dot { left: -28px; }
}

/* ==================================================================
   8. LE MENU DE COMPTE (regle 11j)
   En <details>/<summary> : le depliage est natif, donc il marche au
   clavier et sans JavaScript.
   ================================================================== */
.menu-compte { position: relative; }
.menu-compte__bouton {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 6px 10px; border-radius: var(--rayon); list-style: none;
}
.menu-compte__bouton::-webkit-details-marker { display: none; }
.menu-compte__bouton:hover { background: var(--fond-creuse); }
.menu-compte__pastille {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--accent); color: #ffffff;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600;
}
.menu-compte__nom { font-size: 15px; }
.menu-compte__fleche { color: var(--encre-douce); font-size: 12px; }

.menu-compte__panneau {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 250px; padding: 8px;
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: 0 18px 40px rgba(20, 20, 19, 0.12);
}
.menu-compte__identite { margin: 0 0 8px; padding: 8px 10px; border-bottom: 1px solid var(--bordure); }
.menu-compte__identifiant { display: block; font-size: 14px; }
.menu-compte__role { display: block; font-size: 12px; color: var(--encre-douce); }
.menu-compte__lien {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 15px;
  color: var(--encre); text-decoration: none; background: none; border: 0; cursor: pointer;
}
.menu-compte__lien:hover { background: var(--accent-doux); color: var(--accent-fonce); }
.menu-compte__form { margin: 8px 0 0; padding-top: 8px; border-top: 1px solid var(--bordure); }

/* ==================================================================
   9. LE PIED
   ================================================================== */
/* LE PIED EST CENTRE, comme le contenu qu'il ferme.
   Il etait aligne a gauche sur toute la largeur de la fenetre pendant
   que la page, elle, etait centree sur 1080 px : son filet partait
   donc bien plus loin que ce qu'il soulignait. */
.pied {
  max-width: var(--largeur-front);
  margin: 0 auto;
  border-top: 1px solid var(--bordure);
  padding: 32px 24px 48px;
  font-size: 14px; color: var(--encre-douce);
  text-align: center;
}
.pied p { margin: 0 auto; max-width: 70ch; }
.pied nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin: 12px 0 0; }
.pied a { color: var(--encre-douce); }
.pied__version { margin: 16px 0 0; font-size: 13px; }

/* SUR UNE PAGE CONNECTEE, le pied est un FRERE de .app__corps, pas un
   enfant : centre sur la fenetre entiere, il derive vers la gauche par
   rapport au contenu, qui commence apres le rail. L'ecart vaut une
   demi-largeur de rail et ne se voit que sur grand ecran. On lui rend
   ici la boite du contenu. */
@media (min-width: 900px) {
  .app__corps ~ .pied {
    max-width: none;
    margin: 0;
    padding-left: calc(var(--rail) + 24px);
    text-align: left;
  }
  .app__corps ~ .pied p { margin: 0; }
  .app__corps ~ .pied nav { justify-content: flex-start; }
}

/* ==================================================================
   10. MOUVEMENT REDUIT
   Respecte le reglage systeme : une animation imposee peut declencher
   un malaise chez les personnes sensibles au mouvement.
   ================================================================== */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .tl-card:hover { transform: none; }
}

/* ==================================================================
   11. LA REVELATION AU DEFILEMENT

   Elle n'existe QUE si _js/vitrine.js a pose « .vitrine--anime ».
   Sans lui — script absent, script en erreur, mouvement refuse par le
   systeme — « [data-revele] » n'est qu'un attribut sans effet et le
   bloc est visible comme n'importe quel autre. AUCUNE INFORMATION NE
   VIT DANS UNE ANIMATION.
   ================================================================== */
.vitrine--anime [data-revele] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s ease, transform .5s ease;
}
.vitrine--anime [data-revele].est-visible { opacity: 1; transform: none; }

/* SECONDE SERRURE. Le script s'abstient deja de poser ses classes
   quand le systeme refuse le mouvement, mais ce reglage peut changer
   APRES le chargement de la page — et le script, lui, ne repasse pas. */
@media (prefers-reduced-motion: reduce) {
  .vitrine--anime [data-revele] {
    opacity: 1; transform: none; transition: none;
  }
}

/* ==================================================================
   12. LES PAGES-LISTE (regle 11e et 11f)
   ================================================================== */

.fil-ariane { margin: 0 0 20px; font-size: 14px; color: var(--encre-douce); }
.fil-ariane ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.fil-ariane li + li::before { content: '›'; margin-right: 8px; color: var(--bordure-appuyee); }

/* ---------- LA BARRE D'OUTILS ----------
   UNE BANDE, et non un empilement de boutons posés entre deux blocs :
   le filet du haut la détache du texte d'introduction, celui du bas
   l'attache au tableau qu'elle commande. Mêmes bordure et espacement
   des deux côtés. */
.barre-outils {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  margin: 24px 0 0; padding: 14px 0;
  border-top: 1px solid var(--bordure);
  border-bottom: 1px solid var(--bordure);
}
.barre-outils__gauche,
.barre-outils__droite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.barre-outils label { font-size: 14px; color: var(--encre-douce); }
.barre-outils input[type="search"],
.barre-outils select {
  padding: 9px 12px; font: inherit; font-size: 15px;
  background: var(--carte); color: var(--encre);
  border: 1px solid var(--bordure-appuyee); border-radius: var(--rayon);
}
.barre-outils input[type="search"] { min-width: 240px; }
.barre-outils input::placeholder { color: var(--encre-invite); }

/* ---------- LE TABLEAU ----------
   Il defile dans SON PROPRE conteneur : la page, elle, ne defile
   jamais lateralement. */
.tableau-cadre { overflow-x: auto; margin: 0 0 8px; }

.tableau-donnees { width: 100%; border-collapse: collapse; font-size: 15px; }
.tableau-donnees th, .tableau-donnees td {
  padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--bordure);
  /* UNE LIGNE TIENT SUR UNE LIGNE (regle 11f). */
  white-space: nowrap;
}
.tableau-donnees thead th {
  font-weight: 600; font-size: 13px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--encre-douce);
  border-bottom: 1px solid var(--bordure-appuyee); background: var(--fond);
}
.tableau-donnees thead a { color: inherit; text-decoration: none; }
.tableau-donnees thead a:hover { color: var(--accent); }
.tableau-donnees tbody tr:hover { background: var(--fond-creuse); }

/* La colonne de titre est la seule qui puisse etre coupee : elle prend
   la place restante, les autres se dimensionnent sur leur contenu.
   « max-width: 0 » avec « width: 100% » est l'idiome qui autorise
   l'ellipse dans une cellule de tableau — sans lui, text-overflow ne
   s'applique jamais. */
.col-titre { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }
.col-droite { text-align: right; font-variant-numeric: tabular-nums; }
.tableau-vide { color: var(--encre-douce); white-space: normal; }

/* ---------- LA COLONNE ACTIONS ----------
   DE VRAIS BOUTONS, AVEC UN FOND, SUR UNE SEULE LIGNE (regle 11f).
   Jamais « display: flex » sur la cellule : un <td> en flex sort du
   contexte de mise en forme du tableau et cesse d'obeir aux largeurs
   de colonne. On agit sur ses enfants. */
.col-actions { white-space: nowrap; text-align: right; }
.col-actions > * + * { margin-left: 6px; }
.bouton--table {
  padding: 6px 12px; font-size: 13px; border-radius: 8px;
  background: var(--accent-doux); color: var(--accent-fonce);
  border-color: transparent;
}
.bouton--table:hover { background: var(--accent); color: #ffffff; }
.bouton--table.bouton--secondaire {
  background: var(--fond-creuse); color: var(--encre);
  border-color: var(--bordure-appuyee);
}
.bouton--table.bouton--secondaire:hover { background: var(--carte); color: var(--accent-fonce); }

/* ---------- LA PAGINATION ---------- */
.pagination {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
  padding: 14px 0 0; font-size: 14px;
}
.pagination__compte { margin: 0; color: var(--encre-douce); }
.pagination ul { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span {
  display: inline-block; padding: 6px 12px; border-radius: 8px; text-decoration: none;
}
.pagination a { color: var(--accent); background: var(--accent-doux); }
.pagination a:hover { background: var(--accent); color: #ffffff; }
.pagination span { color: var(--encre-invite); }
.pagination__ici { color: var(--encre) !important; font-weight: 600; }

/* ==================================================================
   13. LA FICHE D'UNE PIECE
   ================================================================== */
.fiche__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
               color: var(--encre-douce); font-size: 14px; margin: 0 0 20px; }
.fiche__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 24px; }
.fiche__note { color: var(--encre-douce); font-size: 14px; margin: 0 0 16px; max-width: 70ch; }

/* Le document affiché est ASSAINI (voir pieces.php) : ni script, ni
   feuille de style, ni attribut style. Il hérite donc de la typographie
   du portail, et c'est voulu — le bouton « télécharger » rend l'aspect
   d'origine à qui le veut. */
.rendu {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 32px; max-width: 80ch;
}
.rendu img { max-width: 100%; height: auto; }
.rendu table { width: 100%; border-collapse: collapse; margin: 0 0 16px; }
.rendu th, .rendu td { padding: 8px 10px; border-bottom: 1px solid var(--bordure); text-align: left; }
.rendu--brut pre { white-space: pre-wrap; word-break: break-word; font-size: 14px; margin: 0; }

.recherche { max-width: 640px; margin: 0 0 8px; }

@media (max-width: 700px) {
  .barre-outils { flex-direction: column; align-items: stretch; }
  .barre-outils input[type="search"] { min-width: 0; width: 100%; }
}

/* ==================================================================
   14. LES FORMULAIRES DE GESTION
   ================================================================== */
.champ input[type="color"] {
  width: 100%; padding: 12px 14px; font: inherit;
  background: var(--fond); color: var(--encre);
  border: 1px solid var(--bordure-appuyee); border-radius: var(--rayon);
}
.champ input[type="color"] { height: 48px; padding: 6px; cursor: pointer; }
.champ input:disabled { color: var(--encre-invite); cursor: not-allowed; }
.champ__note { font-weight: 400; color: var(--encre-douce); font-size: 13px; }
.champ__aide {
  font-size: 14px; color: var(--encre-douce);
  margin: 0 0 20px; line-height: 1.55;
}

.champ-groupe {
  border: 1px solid var(--bordure); border-radius: var(--rayon);
  padding: 18px 20px 8px; margin: 0 0 20px;
}
.champ-groupe legend {
  padding: 0 8px; font-size: 14px; font-weight: 600; color: var(--encre);
}

/* « .champ label » et « .case » — SPECIFICITE, PAS ORDRE.
   « .champ label » vaut 0-1-1 (une classe et un type), « .case » 0-1-0 :
   la premiere l'emporte quelle que soit sa place dans la feuille, et
   imposait « display: block » a la case a cocher, qui se retrouvait
   seule au-dessus de son libelle. Le selecteur qui suit vaut 0-2-1. */
.case,
.champ label.case {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; font-size: 15px; color: var(--encre); cursor: pointer;
  margin: 0;
}
.case input { margin: 0; flex: none; }
/* Une case DESACTIVEE se voit : sans cela, on clique trois fois avant
   de comprendre qu'elle ne repond pas. Et jamais la couleur seule —
   le libelle dit à qui le nom est déjà rattaché. */
.case--prise { color: var(--encre-invite); cursor: not-allowed; }
.case__note { color: var(--encre-douce); font-size: 13px; }

/* ==================================================================
   15. LE MODAL DE CONFIRMATION (regle 11h)
   <dialog> natif : le voile, le piegeage du focus et la fermeture a
   Echap sont fournis par le navigateur.
   ================================================================== */
.modal {
  border: 1px solid var(--bordure); border-radius: var(--rayon-xl);
  padding: 0; max-width: 460px; width: calc(100% - 32px);
  background: var(--carte); color: var(--encre);
}
.modal::backdrop { background: var(--voile); }
.modal__corps { padding: 28px 28px 24px; }
.modal__titre { margin: 0 0 12px; font-size: 21px; }
.modal__cible {
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--fond-creuse); border-radius: 8px;
  font-weight: 600; word-break: break-word;
}
.modal__texte { margin: 0 0 22px; color: var(--encre-douce); font-size: 15px; }
.modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin: 0; }

/* ==================================================================
   16. LES BOUTONS EN TONS (regle 11c)
   Chaque ton = trois variables locales que .bouton consomme.
   ================================================================== */
.bouton-vert   { --ton: var(--vert);  --ton-fonce: var(--vert);  --ton-doux: var(--vert-doux); }
.bouton-rouge  { --ton: var(--rouge); --ton-fonce: var(--rouge); --ton-doux: var(--rouge-doux); }
.bouton-jaune  { --ton: var(--ambre); --ton-fonce: var(--ambre); --ton-doux: var(--ambre-doux); }
.bouton--table.bouton-rouge { background: var(--rouge-doux); color: var(--rouge); }
.bouton--table.bouton-rouge:hover { background: var(--rouge); color: #ffffff; }

/* ==================================================================
   17. LA VISITE GUIDÉE (regle 12b)

   Les POSITIONS sont posees par _js/visite-guidee.js en
   element.style.left : la CSP interdit l'attribut style ecrit par PHP,
   et son echec serait silencieux. Ce qui est ici, ce sont les formes.
   ================================================================== */
.visite-voile {
  position: fixed; inset: 0; z-index: 60;
  background: var(--voile);
}

/* Le halo entoure la cible SANS la masquer : « pointer-events: none »
   pour qu'il ne mange pas les clics, et pas de fond — un fond, meme
   translucide, changerait la couleur de ce qu'on montre. */
.visite-halo {
  position: fixed; z-index: 61; display: none;
  pointer-events: none;
  border: 2px solid var(--accent); border-radius: var(--rayon);
  box-shadow: 0 0 0 9999px rgba(20, 20, 19, 0.45);
}

.visite-bulle {
  position: fixed; z-index: 62;
  width: min(340px, calc(100vw - 32px));
  background: var(--carte); color: var(--encre);
  border: 1px solid var(--bordure); border-radius: var(--rayon-xl);
  padding: 20px 22px 18px;
  box-shadow: 0 18px 40px rgba(20, 20, 19, 0.18);
}
.visite-compteur {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--encre-douce);
}
.visite-titre { margin: 0 0 10px; font-size: 19px; outline: none; }
.visite-texte { font-size: 15px; color: var(--encre-douce); }
.visite-texte p { margin: 0 0 10px; }
.visite-texte p:last-child { margin-bottom: 0; }
.visite-actions {
  display: flex; flex-wrap: wrap; justify-content: flex-end;
  gap: 8px; margin: 18px 0 0;
}
.visite-actions .bouton { padding: 9px 16px; font-size: 14px; }

/* SOUS 900 px LA BULLE NE SUIT PLUS LA CIBLE : elle se pose en bas,
   pleine largeur. Une bulle de 340 px qui cherche a se caler a cote
   d'un element d'un menu replie sort de l'ecran une fois sur deux. */
.visite-bulle--bas {
  left: 16px !important; right: 16px;
  top: auto !important; bottom: 16px;
  width: auto;
}

@media (prefers-reduced-motion: reduce) {
  .visite-bulle, .visite-halo { transition: none; }
}

/* ==================================================================
   18. LES REPONSES A UN QUESTIONNAIRE
   ================================================================== */
.reponse__section { margin: 36px 0 12px; }
.reponse {
  background: var(--carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); padding: 20px 22px; margin: 0 0 14px;
}
.reponse__question { margin: 0 0 12px; font-weight: 600; }
.reponse__bloc { padding: 10px 0 0; border-top: 1px solid var(--bordure); margin-top: 10px; }
.reponse__bloc:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.reponse__qui {
  margin: 0 0 4px; font-size: 13px; color: var(--accent-fonce); font-weight: 600;
}
/* La réponse garde ses retours à la ligne : plusieurs font plusieurs
   paragraphes, et les aplatir change le sens. */
.reponse__texte { margin: 0; color: var(--encre-douce); line-height: 1.6; max-width: 78ch; }