/* Foyane · kit du site, composants de contenu (phase 6b, 28/09/2026).
   Chargé APRÈS kit/site.css, dont il reprend les tokens et les rôles sans en modifier un seul composant.
   Fichier séparé pour que les pages longues (article, décret, ressources, contact) n'alourdissent pas
   l'accueil. Composants : 23 article long · 24 sommaire · 25 texte réglementaire cité · 26 questions
   fréquentes · 27 formulaire à récapitulatifs · 28 index de ressources · 30 pages de contenu migrées.
   Le 27 double le 22 de site.css (formulaire simple, ajouté en parallèle) : à fusionner en un seul composant.
   Aucune couleur nouvelle : l'erreur de formulaire se dit en marine, par le mot, le filet et le signe,
   parce que le pourpre est réservé à « À accompagner » et la capucine à l'agent qui signe. */

/* ------------------------------------------------------------------ 23 · article long */
.surtitre{font-family:var(--police-mono);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2);line-height:1.5;display:flex;flex-wrap:wrap;gap:var(--espace-1) var(--espace-3);margin-bottom:var(--espace-5)}
.surtitre a{color:var(--encre-2)}
.surtitre > span + span::before{content:"·";margin-right:var(--espace-3)}
@media (max-width:759px){.surtitre{flex-direction:column;gap:0}.surtitre > span + span::before{content:none}}
.article-meta{display:flex;flex-wrap:wrap;gap:var(--espace-1) var(--espace-5);margin-top:var(--espace-6);padding-top:var(--espace-4);border-top:var(--trait-filet) solid var(--filet);font-size:15px;color:var(--encre-2);max-width:48em}
.article-meta b{color:var(--encre);font-weight:var(--graisse-semi)}
.prose{max-width:38em}
.prose > * + *{margin-top:var(--espace-5)}
.prose h2{font-family:var(--police-titre);font-weight:var(--graisse-grasse);font-size:clamp(calc(var(--typo-affiche-titre-3-taille) + 2px), 1.1rem + 1.1vw, calc(var(--typo-titre-taille-max)));
  line-height:1.15;letter-spacing:-.02em;margin-top:var(--espace-16);scroll-margin-top:calc(var(--entete) + var(--espace-6));text-wrap:balance}
.prose h3{font-size:calc(var(--typo-affiche-titre-3-taille) - 3px);font-weight:var(--graisse-grasse);line-height:1.25;margin-top:var(--espace-10)}
.prose h2 + *,.prose h3 + *{margin-top:var(--espace-4)}
.prose strong{font-weight:var(--graisse-grasse)}
.prose ul > li{position:relative;padding-left:1.5em}
.prose ul > li::before{content:"";position:absolute;left:0;top:.78em;width:.75em;height:2px;background:var(--encre)}
.prose ol{counter-reset:prose}
.prose ol > li{position:relative;padding-left:2em;counter-increment:prose}
.prose ol > li::before{content:counter(prose);position:absolute;left:0;top:.2em;font-family:var(--police-mono);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2)}
.prose li + li{margin-top:var(--espace-2)}
.prose > figure,.prose > .texte-cite{margin-block:var(--espace-8)}

/* l'encadré « L'essentiel » : ce qu'un lecteur pressé emporte */
.essentiel{border-top:2px solid var(--encre);border-bottom:var(--trait-filet) solid var(--filet);padding:var(--espace-5) 0 var(--espace-6)}
.essentiel__titre{font-family:var(--police-mono);font-weight:var(--graisse-normale);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2);margin-bottom:var(--espace-3)}
.essentiel ol{counter-reset:ess;display:grid;gap:var(--espace-3)}
.essentiel li{counter-increment:ess;display:grid;grid-template-columns:2em minmax(0,1fr);font-size:17px;line-height:1.5}
.essentiel li::before{content:counter(ess);font-family:var(--police-mono);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2);padding-top:.2em}

/* ------------------------------------------------------------------ 24 · sommaire */
.sommaire{border-top:var(--trait-filet) solid var(--encre)}
.sommaire__titre{font-family:var(--police-mono);font-weight:var(--graisse-normale);font-size:var(--typo-affiche-mono-taille);color:var(--encre-2);padding-block:var(--espace-3) var(--espace-1)}
.sommaire a{display:grid;grid-template-columns:2em minmax(0,1fr);gap:var(--espace-2);align-items:baseline;min-height:calc(var(--espace-10) + var(--espace-1));padding:var(--espace-3) 0;
  border-bottom:var(--trait-filet) solid var(--filet);color:var(--encre);text-decoration:none;font-size:15.5px;line-height:1.35}
.sommaire a:hover .sommaire__txt,.sommaire a:target .sommaire__txt{text-decoration:underline}
.sommaire__n{font-family:var(--police-mono);font-size:12.5px;color:var(--encre-2)}
@media (min-width:960px){.sommaire--colle{position:sticky;top:calc(var(--entete) + var(--espace-8))}}

/* ------------------------------------------------------------------ 25 · texte réglementaire cité
   Le texte de loi n'est jamais paraphrasé dans ce cadre : citation exacte, référence en tête, lien
   vers la source officielle en pied. Pas d'ombre : ce n'est pas un écran du produit. */
.texte-cite{background:var(--ecran);border:var(--trait-filet) solid var(--filet);margin:0}
.texte-cite__ref{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:var(--espace-1) var(--espace-4);
  padding:var(--espace-2) var(--espace-5);background:var(--papier);border-bottom:var(--trait-filet) solid var(--filet);font-family:var(--police-mono);font-size:12.5px;color:var(--encre-2)}
.texte-cite__ref b{color:var(--encre);font-weight:var(--graisse-semi, 500)}
.texte-cite blockquote{padding:var(--espace-5) var(--espace-6) var(--espace-3);font-size:17px;line-height:1.6;border-left:3px solid var(--encre);margin:var(--espace-4) var(--espace-5) 0 var(--espace-5);padding-left:var(--espace-5)}
.texte-cite blockquote p + p{margin-top:var(--espace-3)}
.texte-cite blockquote strong{font-weight:var(--graisse-grasse)}
.texte-cite__pied{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:0 var(--espace-4);padding:var(--espace-1) var(--espace-5) var(--espace-2);font-size:14px;color:var(--encre-2)}
.texte-cite__pied a{display:inline-flex;align-items:center;min-height:calc(var(--espace-10) + var(--espace-1));color:var(--encre);font-weight:var(--graisse-semi)}
@media (max-width:520px){.texte-cite blockquote{margin-inline:var(--espace-4);padding:var(--espace-4) 0 var(--espace-2) var(--espace-4);font-size:16.5px}.texte-cite__ref,.texte-cite__pied{padding-inline:var(--espace-4)}}

/* ------------------------------------------------------------------ 26 · questions fréquentes */
.faq{border-top:var(--trait-filet) solid var(--encre);max-width:52em}
.faq details{border-bottom:var(--trait-filet) solid var(--filet)}
.faq summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 16px;gap:var(--espace-4);align-items:center;min-height:calc(var(--espace-12) + var(--espace-2));
  padding:var(--espace-4) 0;font-weight:var(--graisse-semi);font-size:clamp(17px,.9rem + .35vw,20px);line-height:1.35}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:16px;height:16px;justify-self:end;
  background:linear-gradient(var(--encre),var(--encre)) center/100% 2px no-repeat,linear-gradient(var(--encre),var(--encre)) center/2px 100% no-repeat}
.faq details[open] > summary::after{background:linear-gradient(var(--encre),var(--encre)) center/100% 2px no-repeat}
.faq summary:hover > span{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.faq__reponse{padding:0 var(--espace-8) var(--espace-6) 0;max-width:42em}
.faq__reponse p + p{margin-top:var(--espace-3)}

/* ------------------------------------------------------------------ 27 · formulaire à récapitulatifs
   Libellé toujours visible au-dessus du champ ; seuls les champs facultatifs sont marqués ; aide sous le
   libellé ; erreur écrite en toutes lettres sous l'aide, reliée au champ (aria-describedby), avec un
   récapitulatif en tête qui reçoit le focus et renvoie à chaque champ. */
.form{display:grid;gap:var(--espace-6)}
.form-consigne{font-size:15px;color:var(--encre-2)}
.form-rangee{display:grid;gap:var(--espace-6)}
@media (min-width:760px){
  .form-rangee--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-rangee--nom{grid-template-columns:10em repeat(2,minmax(0,1fr))}
}
.form-champ{display:grid;gap:var(--espace-2);align-content:start;min-width:0}
.form-champ__libelle{font-weight:var(--graisse-semi);font-size:16.5px;line-height:1.3}
.form-champ__libelle .facultatif{font-weight:var(--graisse-normale);color:var(--encre-2)}
.form-champ__aide{font-size:14.5px;color:var(--encre-2);line-height:1.45;max-width:36em}
.form-saisie{font:inherit;font-size:17px;line-height:1.3;min-height:var(--espace-12);width:100%;padding:var(--espace-2) var(--espace-3);background:var(--ecran);color:var(--encre);
  border:var(--trait-bouton) solid var(--couleur-bord-champ);border-radius:var(--rayon-aucun);-webkit-appearance:none;appearance:none}
.form-saisie:hover{border-color:var(--encre-2)}
.form-saisie:focus-visible{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:0;border-color:var(--encre)}
select.form-saisie{padding-right:var(--espace-12);cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--encre) 50%),linear-gradient(135deg,var(--encre) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
textarea.form-saisie{min-height:9em;resize:vertical}
.form-saisie--court{max-width:16em}
.form-champ--erreur{padding-left:var(--espace-4);border-left:var(--trait-situation) solid var(--encre)}
.form-champ--erreur .form-saisie{border-color:var(--encre);border-width:2.5px}
.form-champ__erreur{display:flex;gap:var(--espace-2);align-items:flex-start;font-weight:var(--graisse-grasse);font-size:15.5px;line-height:1.4;color:var(--encre)}
.form-champ__erreur::before{content:"!";flex:none;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-top:1px;
  background:var(--encre);color:var(--page);font-size:13px;font-weight:var(--graisse-forte);line-height:1}
.form-recap{border:2px solid var(--encre);background:var(--ecran);padding:var(--espace-5) var(--espace-6)}
.form-recap:focus{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:var(--trait-focus-decalage)}
.form-recap h2,.form-recap h3{font-size:20px;font-weight:var(--graisse-grasse);line-height:1.3;margin-bottom:var(--espace-2)}
.form-recap li a{display:inline-flex;align-items:center;min-height:calc(var(--espace-10) + var(--espace-1));font-weight:var(--graisse-semi)}
.form-envoi{display:flex;flex-wrap:wrap;align-items:center;gap:var(--espace-3) var(--espace-5)}
@media (max-width:759px){.form-envoi .btn{width:100%}}
.form-rgpd{font-size:14.5px;color:var(--encre-2);line-height:1.55;max-width:46em;padding-top:var(--espace-4);border-top:var(--trait-filet) solid var(--filet)}
.form-rgpd p + p{margin-top:var(--espace-2)}
.form-rgpd a{color:var(--encre)}
.form[hidden],.form-recap[hidden],.form-envoye[hidden]{display:none}
.form-piege{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
/* le récapitulatif d'envoi : ce qui part, relu avant et après */
.form-envoye{border-top:2px solid var(--encre);padding-top:var(--espace-5)}
.form-envoye:focus{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:var(--trait-focus-decalage)}
.form-envoye h3{font-size:var(--typo-affiche-titre-3-taille);font-weight:var(--graisse-grasse);line-height:1.2;margin-bottom:var(--espace-3)}
.form-envoye dl{display:grid;grid-template-columns:minmax(0,1fr);border-top:var(--trait-filet) solid var(--filet);margin-top:var(--espace-4)}
.form-envoye dl > div{display:grid;grid-template-columns:9em minmax(0,1fr);gap:var(--espace-3);padding:var(--espace-2) 0;border-bottom:var(--trait-filet) solid var(--filet);font-size:16px}
.form-envoye dd{overflow-wrap:anywhere;min-width:0}
.form-envoye dt{font-family:var(--police-mono);font-size:12.5px;color:var(--encre-2);padding-top:3px}

/* ------------------------------------------------------------------ 28 · index de ressources
   Une ligne par guide : toute la ligne est cliquable, le titre porte le lien (un seul arrêt clavier). */
.ressources{border-top:var(--trait-filet) solid var(--encre)}
.ressource{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--espace-2) var(--gouttiere);padding:var(--espace-6) 0;border-bottom:var(--trait-filet) solid var(--filet)}
.ressource__titre{font-size:clamp(20px,1rem + .6vw,24px);font-weight:var(--graisse-grasse);line-height:1.25;letter-spacing:-.01em;max-width:30em}
.ressource__titre a{color:var(--encre);text-decoration:none}
.ressource__titre a::after{content:"";position:absolute;inset:0}
.ressource:hover .ressource__titre a{text-decoration:underline;text-decoration-thickness:2px}
.ressource__titre a:focus-visible{outline:none}
.ressource:focus-within{outline:var(--trait-focus) solid var(--couleur-focus);outline-offset:var(--trait-focus-decalage)}
.ressource__desc{color:var(--encre-2);font-size:16.5px;line-height:1.5;max-width:40em}
.ressource__meta{font-family:var(--police-mono);font-size:12.5px;color:var(--encre-2);display:flex;flex-wrap:wrap;gap:0 var(--espace-3)}
@media (min-width:760px){
  .ressource{grid-template-columns:minmax(0,1fr) 12em}
  .ressource__titre,.ressource__desc{grid-column:1}
  .ressource__meta{grid-column:2;grid-row:1 / span 2;flex-direction:column;align-items:flex-end;text-align:right;padding-top:5px}
}


@media print{.faq details{break-inside:avoid}.form-envoi,.form-piege{display:none}}

/* ------------------------------------------------------------------ 30 · pages de contenu migrées (29/09/2026)
   Guides et pages de service de l'ancien site, repris dans le gabarit d'article (23) sans changer leur texte. */
.art-ouv{padding-block:clamp(var(--espace-8),4.2vw,var(--espace-16)) clamp(var(--espace-10),5vw,var(--espace-16))}
.art-ouv .t1{max-width:15em}
.art-ouv .chapo{font-size:clamp(var(--typo-corps-taille-max),.95rem + .55vw,calc(var(--typo-affiche-titre-3-taille) - var(--espace-1)));line-height:1.45;color:var(--encre);max-width:34em}
.art-corps{padding-bottom:clamp(var(--espace-12),6.4vw,calc(var(--espace-20) + var(--espace-4)));border-top:var(--trait-filet) solid var(--filet);padding-top:clamp(var(--espace-10),4vw,var(--espace-16))}
.prose > .defile,.prose > .modele,.prose > .encadre,.prose > .faq{margin-block:var(--espace-8)}
.prose .defile{max-width:none}
.encadre{border-left:var(--trait-situation) solid var(--encre);padding:var(--espace-1) 0 var(--espace-1) var(--espace-5)}
.encadre__titre{font-weight:var(--graisse-grasse);margin-bottom:var(--espace-2)}
.encadre p + p{margin-top:var(--espace-3)}
.modele{background:var(--ecran);border:var(--trait-filet) solid var(--filet);padding:var(--espace-5) var(--espace-6);font-size:16px;line-height:1.6}
.modele__titre{font-family:var(--police-mono);font-size:12.5px;color:var(--encre-2);margin-bottom:var(--espace-3)}
.modele p + p{margin-top:var(--espace-3)}
.art-notes{padding-bottom:var(--espace-12)}
.art-notes .notes{margin-top:0}
.demo{padding-block:clamp(var(--espace-12),6.4vw,calc(var(--espace-20) + var(--espace-4)))}
.demo__choix{display:grid;gap:var(--espace-10) var(--gouttiere);margin-top:clamp(var(--espace-10),5vw,var(--espace-16))}
.demo__choix > div{border-top:var(--trait-filet) solid rgba(248,247,242,.35);padding-top:var(--espace-5);display:grid;gap:var(--espace-5);align-content:start}
.demo__choix p{max-width:30em;color:var(--page)}
.demo__choix .btn{justify-self:start}
@media (min-width:960px){.demo__choix{grid-template-columns:repeat(12,minmax(0,1fr))}.demo__choix > div:first-child{grid-column:1 / span 6}.demo__choix > div:last-child:not(:first-child){grid-column:8 / -1}}
@media (max-width:759px){.demo__choix .btn{justify-self:stretch}}
.panneau-telechargement{border:var(--trait-filet) solid var(--filet);background:var(--ecran);padding:var(--espace-6);display:grid;gap:var(--espace-5)}
.panneau-telechargement__titre{font-size:clamp(20px,1rem + .6vw,24px);font-weight:var(--graisse-grasse);line-height:1.25}
.panneau-telechargement .form{border-top:var(--trait-filet) solid var(--filet);padding-top:var(--espace-5)}
.calc-resultat{border-top:2px solid var(--encre);padding-top:var(--espace-5);margin-top:var(--espace-8);display:grid;gap:var(--espace-2)}
.calc-resultat__heures{font-size:clamp(28px,1.2rem + 1.6vw,40px);font-weight:var(--graisse-grasse);letter-spacing:-.02em;line-height:1.1}
.calc-resultat__actions{display:flex;flex-wrap:wrap;gap:var(--espace-3) var(--espace-5);margin-top:var(--espace-4)}
.service{padding-block:clamp(var(--espace-12),8vw,var(--espace-20))}
.service .t1{max-width:14em}
.service .chapo{margin-top:var(--espace-5);max-width:34em}
.suite-appel{margin-top:var(--espace-10);max-width:42em;border-top:var(--trait-filet) solid var(--filet)}
.suite-appel li{display:grid;grid-template-columns:7.8em minmax(0,1fr);gap:var(--espace-3);padding:var(--espace-4) 0;border-bottom:var(--trait-filet) solid var(--filet);font-size:16.5px;line-height:1.45}
.suite-appel .mono{color:var(--encre-2);padding-top:3px}
@media (max-width:30em){.suite-appel li{grid-template-columns:1fr;gap:var(--espace-1)}}
.motif{display:none}
.motif:target,.motifs:not(:has(.motif:target)) .motif--defaut{display:block}
.service__actions{display:flex;flex-wrap:wrap;gap:var(--espace-3) var(--espace-5);margin-top:var(--espace-8)}
.calc-resultat[hidden]{display:none}
#form-error{display:none}
#form-error:target{display:block}

/* Appels vers /registre-2027 (01/10/2026) */
.annee__estimer{margin-top:var(--espace-8)}
.duree__estimer{margin-top:var(--espace-6)}