/**
* Composants partagés des pages internes (CDC §8) : en-tête de page,
* fil d'Ariane, article, rebond. Utilisés par page.php et les
* gabarits single-*.php / archive-*.php.
*/
/* -------- En-tête de page (composant de continuité, §8.2) -------- */
.ph{background:var(--white);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.ph__in{
display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(24px,4vw,56px);
align-items:center;padding-block:clamp(20px,2.5vw,32px);
}
.ph__title{font-size:clamp(1.9rem,4vw,3rem);margin:.6rem 0 .8rem}
.ph__chapo{color:var(--ink-70);font-size:1.05rem;max-width:60ch;margin-bottom:1rem}
.ph__fil{
font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.04em;
color:var(--teal-800);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;
}
.ph__fil a{color:var(--teal-800)}
.ph__fil a:hover{text-decoration:underline}
.ph__fil span[aria-hidden]{color:var(--ink-45)}
.ph__fil span[aria-current]{color:var(--ink-45)}
.ph__iris{width:100%;max-width:150px;margin-inline:auto}
@media(max-width:900px){
.ph__in{grid-template-columns:1fr}
.ph__iris{max-width:110px;order:-1}
}
/* -------- Bandeau signalement (template-parts/front/cta-signaler) --------
Présent sur toutes les pages (CDC §8.1), pas seulement l'accueil — doit
donc vivre ici (page.css, chargé partout) et non dans front.css (chargé
seulement sur l'accueil et quelques archives), sous peine de s'afficher
sans aucun habillage sur les pages internes. */
.cta-band{background:var(--bord-800);color:#fff;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;right:-90px;top:50%;transform:translateY(-50%);width:420px;height:420px;border-radius:50%;border:70px solid rgba(255,255,255,.05)}
.cta-band__in{display:grid;grid-template-columns:1.3fr .7fr;gap:3rem;align-items:center;position:relative;z-index:2}
.cta-band h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:.8rem}
.cta-band p{color:rgba(255,255,255,.78);max-width:52ch;font-size:.98rem}
.cta-band__acts{display:flex;flex-direction:column;gap:.7rem}
.btn--white{background:#fff;color:var(--bord-800)}
.btn--white:hover{background:var(--bord-050)}
.btn--outline{border:1.5px solid rgba(255,255,255,.35);color:#fff}
.btn--outline:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.cta-band__note{font-size:.74rem;color:rgba(255,255,255,.5);margin-top:.4rem;font-family:var(--ff-mono)}
@media(max-width:1180px){.cta-band__in{grid-template-columns:1fr}}
/* -------- Article (single-ofnac_actualite, etc.) -------- */
.shell--article{max-width:760px}
.actualite-article{padding-block:clamp(40px,5vw,64px)}
.actualite-article__meta{
font-family:var(--ff-mono);font-size:.75rem;color:var(--ink-45);
letter-spacing:.04em;margin-bottom:1.5rem;
}
.actualite-article__content{color:var(--ink-70);line-height:1.75;font-size:1.02rem}
.actualite-article__content h2,.actualite-article__content h3{color:var(--ink);margin:2rem 0 .8rem}
.actualite-article__content p{margin-bottom:1.2rem}
.actualite-article__content img{border-radius:var(--r);margin-block:1.5rem}
.actualite-article__content figcaption{font-size:.8rem;color:var(--ink-45);margin-top:-1rem;margin-bottom:1.5rem}
.actualite-article__cta{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.actualite-docs{margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--line)}
.actualite-docs__label{font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-45);display:block;margin-bottom:.9rem}
.actualite-docs__list{list-style:none;display:flex;flex-direction:column;gap:.6rem}
.actualite-docs__item{display:flex;align-items:center;gap:.7rem;padding:.7rem 1rem;border:1px solid var(--line);border-radius:var(--r);color:var(--ink);transition:border-color .2s,background .2s}
.actualite-docs__item:hover{border-color:var(--teal-600);background:var(--teal-050)}
.actualite-docs__ico{width:18px;height:18px;color:var(--teal-800);flex:none}
.actualite-docs__badge{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-800);background:#fff;border:1px solid var(--teal-200);border-radius:100px;padding:.2rem .6rem;flex:none}
.actualite-docs__nom{font-size:.9rem}
.salle-presse__txt{display:flex;flex-direction:column;gap:.15rem}
.salle-presse__source{font-family:var(--ff-mono);font-size:.7rem;color:var(--ink-45)}
/* -------- Rebond (CDC §8.3) -------- */
.rebond{padding-block:clamp(48px,6vw,72px)}
.rebond .eyebrow{margin-bottom:1.5rem}
.rebond__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.rebond__card{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;
display:flex;flex-direction:column;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.rebond__card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(14,30,30,.35);border-color:var(--teal-200)}
.rebond__img{aspect-ratio:16/10;overflow:hidden;background:var(--teal-050);display:block}
.rebond__img img{width:100%;height:100%;object-fit:cover}
.rebond__card h3{padding:1.1rem 1.2rem .3rem;font-size:1rem;line-height:1.3}
.rebond__go{
margin-top:auto;padding:.6rem 1.2rem 1.2rem;font-size:.75rem;font-weight:600;
font-family:var(--ff-mono);letter-spacing:.06em;text-transform:uppercase;
color:var(--teal-800);display:flex;align-items:center;gap:.4rem;
}
.rebond__go svg{width:12px;height:12px;transition:transform .3s var(--ease)}
.rebond__card:hover .rebond__go svg{transform:translateX(4px)}
@media(max-width:900px){.rebond__grid{grid-template-columns:1fr}}
/* -------- Page générique (page.php) : contenu éditeur standard -------- Pleine
largeur par défaut (les pages avec une mise en page dédiée, ex. la
biographie Président/Vice-Président en 2 colonnes, utilisent leurs
propres classes — .membre-bio — pas .page-content, donc ne sont pas
concernées par cette largeur). -------- */
.page-content{padding-block:clamp(40px,5vw,64px);color:var(--ink-70);line-height:1.75;font-size:1.02rem;max-width:none}
.page-content h2,.page-content h3{color:var(--ink);margin:2rem 0 .8rem}
.page-content p{margin-bottom:1.2rem}
.page-content ul,.page-content ol{margin:0 0 1.2rem 1.4rem}
.page-content li{margin-bottom:.4rem}
.page-content img{border-radius:var(--r);margin-block:1.5rem;max-width:100%}
.page-content a{color:var(--teal-800);text-decoration:underline}
/* Emphase dans un texte au long cours (ex. Mot du Président) : teal plutôt
qu'un simple italique noir — sans pour autant en faire un encadré, une
lettre reste une lettre (2026-08). */
.page-content em{font-style:italic;color:var(--teal-800)}
/* Signature de fin de lettre : une règle fine au-dessus, pas de cadre.
Nom en évidence (le signataire), fonction en dessous dans un style
discret (le rôle, secondaire face à la personne). */
.signature{margin-top:2.2rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.signature__nom{margin:0;font-size:1.05rem;font-weight:700;color:var(--teal-800)}
.signature__titre{margin:.2rem 0 0;font-size:.85rem;color:var(--ink-45)}
/* -------- Présentation de l'OFNAC : texte + fiche factuelle --------
Texte principal en prose (the_content, comme partout), fiche à droite
pour les données identitaires (statut, texte fondateur…) qui se lisent
mieux en liste qu'en paragraphe. -------- */
.presentation-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;padding-block:clamp(40px,5vw,64px)}
.presentation-grid .page-content{padding-block:0}
.fiche-panel{background:var(--teal-050);border-radius:var(--r-lg);padding:1.6rem 1.7rem;position:sticky;top:130px}
.fiche-panel__item{display:flex;gap:.7rem;padding:.8rem 0;border-bottom:1px solid var(--teal-200)}
.fiche-panel__item:last-child{border-bottom:0;padding-bottom:0}
.fiche-panel__item:first-child{padding-top:0}
.fiche-panel__item svg{width:18px;height:18px;color:var(--teal-800);flex:none;margin-top:2px}
.fiche-panel__label{font-family:var(--ff-mono);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-45);margin-bottom:.2rem}
.fiche-panel__valeur{font-size:.86rem;color:var(--ink);font-weight:600;line-height:1.4}
.fiche-panel__valeur--lien{display:inline-block;text-decoration:underline;text-decoration-color:var(--teal-200);text-underline-offset:2px;transition:color .2s}
.fiche-panel__valeur--lien:hover{color:var(--teal-800)}
@media(max-width:900px){.presentation-grid{grid-template-columns:1fr}.fiche-panel{position:static}}
/* -------- Historique : frise chronologique -------- Rail vertical +
marqueurs, même grammaire que .axes (accueil) mais tournée à la
verticale pour une lecture chronologique. Marqueur bordeaux réservé
aux étapes qui marquent un recul (ex. 2024) — jamais décoratif,
piloté par le champ "couleur" de chaque étape. -------- */
.chronologie{position:relative;padding-block:clamp(30px,4vw,48px);max-width:70ch}
.chronologie::before{content:"";position:absolute;left:13px;top:0;bottom:0;width:2px;background:var(--line)}
.etape{position:relative;padding-left:2.6rem;padding-bottom:2.2rem}
.etape:last-child{padding-bottom:0}
.etape::before{content:"";position:absolute;left:5px;top:4px;width:16px;height:16px;border-radius:50%;background:var(--teal-600);border:3px solid #fff;box-shadow:0 0 0 2px var(--teal-200)}
.etape--bordeaux::before{background:var(--bord-600);box-shadow:0 0 0 2px var(--bord-050)}
.etape__annee{font-family:var(--ff-mono);font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--teal-600);margin-bottom:.3rem}
.etape--bordeaux .etape__annee{color:var(--bord-600)}
.etape h3{font-size:1.1rem;margin:0 0 .6rem;color:var(--ink)}
.etape .page-content{padding-block:0}
.etape p{margin-bottom:.9rem;font-size:.92rem;line-height:1.7;color:var(--ink-70)}
.etape ul{margin:0 0 .9rem 1.2rem;font-size:.92rem;line-height:1.7;color:var(--ink-70)}
.etape li{margin-bottom:.35rem}
.etape p:last-child,.etape ul:last-child{margin-bottom:0}
/* -------- Historique : chronologie + repères chiffrés en colonne --------
Les chiffres viennent du texte de la période 2012-2025 (assujettis,
plaintes, rapports) : mis en valeur ici, pas dupliqués comme nouvelle
donnée — même style que .chiffre-cle (Organe délibérant), en colonne
plutôt qu'en ligne. -------- */
.chronologie-grid{display:grid;grid-template-columns:2fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;padding-block:clamp(30px,4vw,48px)}
.chronologie-grid .chronologie{padding-block:0}
.chiffres-historique{background:var(--teal-050);border-radius:var(--r-lg);padding:1.6rem 1.7rem;position:sticky;top:130px;display:flex;flex-direction:column;gap:1.5rem}
.chiffres-historique__label{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-bottom:.2rem}
.chiffres-historique .chiffre-cle__valeur{font-size:1.7rem}
@media(max-width:900px){.chronologie-grid{grid-template-columns:1fr}.chiffres-historique{position:static}}
/* -------- Étapes horizontales, cadres reliés par des flèches --------
Alternative à .chronologie/.etape (rail vertical) pour les processus
qu'on veut lire côte à côte plutôt qu'empilés (Comment effectuer une
déclaration de patrimoine, Comment faire une demande d'accès à
l'information) : mêmes 3 teintes teal que .cadre-link, en boucle si
plus de 3 étapes, séparées par des flèches qui appuient la
progression. -------- */
/* nowrap, pas wrap : avec 4-5 étapes (accès à l'info) un flex-wrap
classique casse une carte isolée sur une 2e ligne, avec une hauteur
incohérente par rapport aux autres — mieux vaut que toutes les cartes
rétrécissent ensemble (flex:1 1 0, sans min-width qui forcerait le
retour à la ligne) jusqu'au point de bascule mobile (colonne). */
/* align-items:flex-start (pas stretch) : certaines étapes ont un texte
bien plus long que d'autres (ex. "Déposer le dossier" avec ses 2
modalités, contre une simple phrase pour "Remplir le formulaire") —
les étirer à hauteur égale laissait un grand vide dans les cartes
courtes. Chaque carte garde maintenant la hauteur de son propre texte ;
la flèche reste centrée sur la hauteur totale de la rangée. */
.etapes-flow{display:flex;align-items:flex-start;gap:0;flex-wrap:nowrap;margin-top:1.8rem}
.etapes-flow__step{
background:var(--teal-900);color:#fff;border-radius:var(--r-lg);
padding:1.6rem 1.5rem;flex:1 1 0;min-width:0;
box-shadow:0 18px 38px -24px rgba(14,30,30,.4);
}
/* Couleur cyclée sur l'ordre RÉEL des étapes (classe --0/--1/--2/--3 posée
par le template selon l'index PHP), pas sur nth-child : les flèches
.etapes-flow__arrow sont des enfants au même niveau que les cartes, donc
nth-child comptait aussi les flèches et décalait le cycle de couleur
(bug constaté à l'audit 2026-08 : mauvaises paires fond/texte). */
.etapes-flow__step--1{background:var(--teal-800)}
.etapes-flow__step--2{background:var(--teal-600);color:var(--ink)}
.etapes-flow__step--3{background:var(--teal-800)}
.etapes-flow__num{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;opacity:.75;margin-bottom:.6rem}
/* Spécificité volontairement plus haute que ".bio-section h3/p" (0-1-1) :
quand .etapes-flow est imbriqué dans un .bio-section (Droit d'accès à
l'information), cette règle egale-spécificité mais déclarée plus tôt
dans la feuille perdait la cascade et imposait --teal-800/--ink-70 sur
TOUTES les cartes, y compris celles à fond foncé (texte quasi illisible,
audit 2026-08) — la couleur de chaque carte doit toujours primer. */
.etapes-flow .etapes-flow__step h3{font-size:1rem;margin:0 0 .7rem;line-height:1.35;color:inherit}
.etapes-flow .etapes-flow__step p{font-size:.85rem;line-height:1.65;opacity:.92;margin:0 0 .8rem;color:inherit}
.etapes-flow__step p:last-child{margin-bottom:0}
.etapes-flow .etapes-flow__step ul{margin:0 0 .8rem 1.1rem;font-size:.85rem;line-height:1.6;opacity:.92;color:inherit}
.etapes-flow__step ul:last-child{margin-bottom:0}
.etapes-flow__arrow{display:flex;align-items:center;justify-content:center;flex:0 0 44px;color:var(--teal-600);align-self:stretch}
.etapes-flow__arrow svg{width:20px;height:20px}
@media(max-width:900px){
.etapes-flow{flex-direction:column}
.etapes-flow__arrow{transform:rotate(90deg);flex:0 0 32px;align-self:center}
}
/* -------- Sanctions : répartition en 2 colonnes --------
Découpage purement positionnel d'une liste existante (les premières
entrées à gauche, les suivantes à droite, dans l'ordre déjà saisi) :
aucune catégorie éditoriale nouvelle, juste 2 cadres de couleur pour
aérer une liste longue. -------- */
.sanctions-cols{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:1.6rem}
.sanctions-cols__col{
list-style:none;margin:0;padding:1.5rem 1.6rem;
background:var(--teal-900);color:#fff;border-radius:var(--r-lg);
box-shadow:0 18px 38px -24px rgba(14,30,30,.4);
}
.sanctions-cols__col--b{background:var(--teal-800)}
.sanctions-cols__col li{font-size:.9rem;line-height:1.65;margin:0 0 .9rem;padding-left:1.2rem;position:relative}
.sanctions-cols__col li:last-child{margin-bottom:0}
.sanctions-cols__col li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
@media(max-width:700px){.sanctions-cols{grid-template-columns:1fr}}
/* -------- Organe délibérant : chiffres clés -------- Petits repères
numériques (mandat, quorum, majorité), même famille visuelle que
.stats (accueil) mais sans compteur animé — ce sont des règles fixes,
pas des statistiques d'activité. -------- */
.chiffres-cles{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin:2rem 0}
.chiffre-cle{border-left:2px solid var(--teal-200);padding-left:1rem}
.chiffre-cle__valeur{font-family:var(--ff-display);font-size:1.6rem;font-weight:700;color:var(--teal-800);line-height:1}
.chiffre-cle__label{font-size:.78rem;color:var(--ink-45);margin-top:.4rem}
@media(max-width:680px){.chiffres-cles{grid-template-columns:1fr 1fr}}
/* -------- Formations de l'Assemblée -------- Même recette que .cadre-link
(Cadre Juridique) : couleur pleine, jamais de bordeaux décoratif,
propre jeu de classes car le sujet n'a rien à voir (formations d'un
organe, pas zones géographiques d'un texte). -------- */
.formations{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.5rem 0 2.5rem}
.formation{border-radius:var(--r-lg);color:#fff;padding:1.6rem 1.5rem;display:flex;flex-direction:column;gap:.6rem}
.formation--teal-900{background:var(--teal-900)}
.formation--teal-800{background:var(--teal-800)}
.formation--teal-600{background:var(--teal-600);color:var(--ink)}
.formation--teal-600 p{color:var(--ink-70)}
.formation h3{font-size:1.05rem;color:#fff}
.formation--teal-600 h3{color:var(--ink)}
.formation p{font-size:.85rem;color:rgba(255,255,255,.82);line-height:1.6;margin:0}
@media(max-width:900px){.formations{grid-template-columns:1fr}}
/* -------- Encadré de référence légale -------- Citation d'un texte de
loi mise en évidence dans le corps d'une page (ex. Antennes
régionales, article 2 de la loi n° 2025-12). Fond teal, pas bordeaux :
c'est une référence, pas une alerte. -------- */
.citation-legale{background:var(--teal-050);border-left:3px solid var(--teal-600);border-radius:0 var(--r) var(--r) 0;padding:1.4rem 1.6rem;margin:2rem 0;max-width:70ch}
.citation-legale svg{width:18px;height:18px;color:var(--teal-800);margin-bottom:.6rem}
.citation-legale p{margin:0;font-size:.9rem;line-height:1.7;color:var(--ink-70)}
/* -------- Coopération : partenaires -------- Nationaux (nom + rôle,
liste) et internationaux (sigles seuls, pastilles) — deux formats
distincts car les données disponibles ne sont pas symétriques (le
rôle de chaque partenaire national est connu, pas systématiquement
pour les organisations internationales). -------- */
.partenaires-liste{display:flex;flex-direction:column;gap:.5rem;margin:1.5rem 0 2rem;max-width:70ch}
.partenaire-item{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.7rem 1rem;background:var(--teal-050);border-radius:var(--r)}
.partenaire-item__nom{font-size:.88rem;font-weight:600;color:var(--ink)}
.partenaire-item__role{font-size:.78rem;color:var(--ink-45);text-align:right}
/* Simples mots séparés par un point médian, pas des pastilles pleines :
la forme en pilule (fond, bord arrondi) faisait ressembler cette liste
à une barre d'onglets alors que ce ne sont que des noms de partenaires,
sans rien de cliquable (audit 2026-08). */
.partenaires-tags{margin:1.5rem 0 2rem;line-height:2}
.partenaire-tag{font-family:var(--ff-mono);font-size:.85rem;color:var(--teal-800);font-weight:600}
.partenaire-tag:not(:first-child)::before{content:"·";margin:0 .6rem;color:var(--ink-45);font-weight:400}
/* -------- Biographie en sections (Président, Vice-Président…) --------
Un cadre par section plutôt qu'un seul bloc de prose (2026-08). Même
habillage que .bio-section pour un département (une seule section,
pas de répéteur — le texte n'a qu'un seul bloc). -------- */
.bio-sections{display:flex;flex-direction:column;gap:1.2rem;margin-top:.5rem}
.bio-section{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.7rem}
.bio-section h3{font-size:1.02rem;color:var(--teal-800);margin:0 0 .8rem}
.bio-section p{margin-bottom:.9rem;font-size:.94rem;line-height:1.7;color:var(--ink-70)}
.bio-section ul,.bio-section li{line-height:1.7}
.bio-section p:last-child{margin-bottom:0}
/* Contour de couleur optionnel (--1/--2/--3, mêmes teintes que
.cadre-link--1/--2/--3) : réservé aux pages où les cadres empilés
forment une vraie progression à distinguer au premier coup d'œil
(ex. Protection des lanceurs d'alerte) — pas appliqué par défaut aux
biographies, qui restent neutres. Même recette que .mvv-card. */
.bio-section--1{border-top:4px solid var(--teal-900)}
.bio-section--2{border-top:4px solid var(--teal-800)}
.bio-section--3{border-top:4px solid var(--teal-600)}
/* -------- Bandeau "bientôt disponible" -------- */
.a-venir{
background:var(--teal-050);border:1px dashed var(--teal-200);border-radius:var(--r-lg);
padding:1.5rem 1.8rem;margin-block:2rem;display:flex;gap:1rem;align-items:flex-start;
max-width:760px;
}
.a-venir svg{width:22px;height:22px;color:var(--teal-800);flex:none;margin-top:2px}
.a-venir p{margin:0;font-size:.92rem;color:var(--ink-70);line-height:1.65}
/* -------- Liste des assujettis : tableau institution × documents --------
3 colonnes fixes (Institution / Déposer / Défaillants) ; le bordeaux sur
l'en-tête "Défaillants" est un signal légitime (CDC règle 3 : liste des
défaillants = alerte), pas une couleur décorative. Défilement horizontal
propre plutôt qu'un réempilement qui casserait la lecture ligne/institution. */
.assj-doc-table-wrap{overflow-x:auto;margin-block:2rem;border:1px solid var(--line);border-radius:var(--r-lg)}
.assj-doc-table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem}
.assj-doc-table__th{
font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
padding:.9rem 1.2rem;text-align:left;background:var(--teal-050);color:var(--teal-800);white-space:nowrap;
}
.assj-doc-table__th--teal{background:var(--teal-800);color:#fff}
.assj-doc-table__th--bord{background:var(--bord-800);color:#fff}
.assj-doc-table__institution{
font-family:var(--ff-body);font-weight:700;font-size:.92rem;color:var(--ink);
text-align:left;padding:.85rem 1.2rem;white-space:nowrap;
}
.assj-doc-table td{padding:.85rem 1.2rem;border-top:1px solid var(--line)}
.assj-doc-table tbody th{border-top:1px solid var(--line)}
/* Colonnes pleines (pas seulement l'en-tête) : contraste vérifié par calcul
(formule WCAG relative luminance), pas à l'œil —
blanc sur --teal-800 (#257A7A) : ratio 5,07:1 (seuil AA texte normal 4,5:1)
blanc sur --bord-800 (#660000) : ratio 13,31:1
Une teinte de bordure légèrement plus sombre sépare les lignes sans
dépendre du gris neutre --line, illisible sur un fond saturé. */
.assj-doc-table__cell--teal{background:var(--teal-800);border-top:1px solid var(--teal-900)}
.assj-doc-table__cell--bord{background:var(--bord-800);border-top:1px solid #4d0000}
/* Sélecteur à 2 classes (pas juste .assj-doc-table__lien) : nécessaire pour
passer devant .page-content a (color: teal-800, text-decoration: underline,
spécificité 0,1,1) qui s'appliquait sinon par-dessus — le lien "Consulter"
rendait en teal-800 sur fond teal-800, quasi invisible, pas en blanc comme
prévu. Repéré en vérifiant le CSS réellement appliqué, pas en supposant
que la règle posée plus haut suffisait. */
.assj-doc-table__cell--teal .assj-doc-table__lien,
.assj-doc-table__cell--bord .assj-doc-table__lien{
display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1.05rem;
color:#fff;text-decoration:none;
}
.assj-doc-table__cell--teal .assj-doc-table__lien:hover,
.assj-doc-table__cell--bord .assj-doc-table__lien:hover{text-decoration:underline}
.assj-doc-table__lien svg{width:18px;height:18px;flex:none}
/* Icône seule (option A validée) : le texte "Document non disponible..."
reste dans le DOM pour les lecteurs d'écran (.screen-reader-text, base.css)
mais n'est jamais affiché visuellement — évite un tableau de 33 lignes
saturé de texte répété "non disponible pour le moment". */
.assj-doc-table__vide{
display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;
border:1.5px solid rgba(255,255,255,.55);border-radius:50%;
}
.assj-doc-table__vide svg{width:14px;height:14px;color:#fff}
@media(max-width:680px){
.assj-doc-table__th,.assj-doc-table__institution,.assj-doc-table td{padding:.7rem .9rem}
}
/* -------- Cadre Juridique : sommaire → 3 cadres (National / Communautaire /
International), chacun vers sa propre page. Couleur distincte par
catégorie, toujours dans la famille teal — le bordeaux reste réservé au
signal (CDC), jamais décoratif pour une simple catégorie. -------- */
.cadre-links{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2rem;margin-bottom:3.5rem;max-width:none}
.cadre-links--2{grid-template-columns:repeat(2,1fr)}
.cadre-link{
border-radius:var(--r-lg);color:#fff;
padding:2rem 1.8rem;display:flex;flex-direction:column;gap:.7rem;
box-shadow:0 18px 38px -24px rgba(14,30,30,.4);
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.cadre-link:hover{transform:translateY(-4px);box-shadow:0 22px 44px -22px rgba(14,30,30,.45)}
.cadre-link--national{background:var(--teal-900)}
.cadre-link--communautaire{background:var(--teal-800)}
.cadre-link--international{background:var(--teal-600)}
/* Icône optionnelle (cartes purement informatives, pas de navigation —
ex. comparatif dénonciation/signalement/plainte) : même emplacement que
.mvv-card__icon, en blanc pour rester lisible sur fond teal foncé. */
.cadre-link__icon{width:30px;height:30px}
.cadre-link__icon svg{width:100%;height:100%;color:#fff}
.cadre-link--3 .cadre-link__icon svg{color:var(--ink)}
/* Sélecteur composé (".cadre-link .cadre-link__title", pas juste
".cadre-link__title") : ces cartes sont parfois imbriquées dans un
.bio-section (comparatif Accès à l'information) dont la règle
".bio-section h3{color:var(--teal-800)}" est plus spécifique qu'une
simple classe et gagnerait sinon la cascade, quel que soit l'ordre dans
la feuille (bug constaté à l'audit 2026-08 : titre teal-800 illisible
sur fond bordeaux/teal-900). */
.cadre-link .cadre-link__title{font-size:1.35rem;letter-spacing:-.02em;color:#fff;margin-bottom:.4rem}
/* .93 et non blanc plein : sur teal-900 l'écart est invisible (7,2:1), mais
sur teal-800 le blanc pur reste la seule valeur qui passe confortablement
4,5:1 (AA) sans reproduire l'échec du rgba(.8) précédent (3,86:1, mesuré
à l'audit 2026-08). */
/* flex:1 uniquement sur le DERNIER paragraphe (pas chaque ) : sur les
cartes à un seul texte (Cadre Juridique, comparatifs), ce dernier
est aussi le seul, donc rien ne change ; sur les cartes à plusieurs
paragraphes/listes (accès à l'info, communicable/non communicable),
ça évite que CHAQUE
s'étire et casse le rythme entre les blocs —
seul l'espace final est absorbé, pour une hauteur de carte harmonieuse
même quand les 2 colonnes n'ont pas la même longueur de texte. */
.cadre-link p{font-size:.88rem;color:rgba(255,255,255,.93);line-height:1.6}
.cadre-link p:last-of-type{flex:1}
.cadre-link ul{margin:.3rem 0 .9rem 1.1rem;font-size:.88rem;color:rgba(255,255,255,.93);line-height:1.6}
.cadre-link li{margin-bottom:.35rem}
.cadre-link p strong{display:inline-block;margin-top:.3rem}
.cadre-link__go{font-size:.84rem;font-weight:600;display:inline-flex;align-items:center;gap:.4rem;color:#fff}
/* teal-600 est la teinte la plus claire : du texte blanc dessus n'atteint
pas 4,5:1 (WCAG AA). Texte sombre (--ink, 5,25:1) plutôt que d'assombrir
la teinte, même choix que les cartes citoyennes de l'accueil. --ink et non
--ink-70 sur le paragraphe : --ink-70 est calibré pour du texte sombre sur
fond CLAIR (blanc/paper), pas sur un fond teinté comme teal-600 — au
même endroit il retombait à 2,4:1 (audit 2026-08). Ces règles doivent
rester après les précédentes : même spécificité sur "p", seul l'ordre
dans la feuille les départage. */
.cadre-link--international .cadre-link__title,
.cadre-link--international .cadre-link__go{color:var(--ink)}
.cadre-link--international p,
.cadre-link--international ul{color:var(--ink)}
.cadre-link__go svg{width:14px;height:14px;transition:transform .25s var(--ease)}
.cadre-link:hover .cadre-link__go svg{transform:translateX(4px)}
/* Alias génériques (1/2/3 = mêmes 3 teintes teal, du plus foncé au plus
clair) — même carte réutilisée hors du contexte National/Communautaire/
International (ex. comparatifs Ofnac Citoyen), sans le nom trompeur. */
.cadre-link--1{background:var(--teal-900)}
.cadre-link--2{background:var(--teal-800)}
.cadre-link--3{background:var(--teal-600);color:var(--ink)}
.cadre-link--3 .cadre-link__title,
.cadre-link--3 .cadre-link__go{color:var(--ink)}
.cadre-link--3 p,
.cadre-link--3 ul{color:var(--ink)}
/* Bordeaux réservé : ce qui n'est PAS communicable est un vrai signal
d'alerte (accès refusé, secret protégé) — pas une 4e teinte décorative
de la famille teal. Seul cet usage précis justifie le bordeaux ici. */
.cadre-link--bord{background:var(--bord-600)}
.cadre-link--bord .cadre-link__icon svg{color:#fff}
/* -------- Liste à puces iconées -------- Pour les énumérations légales
homogènes (qui peut saisir l'OFNAC, secrets protégés, assujettis…) :
une icône par ligne, pas une carte par ligne — plus léger qu'.icon-grid
quand chaque item est une simple phrase, pas un titre + description. */
.liste-picto{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.5rem;margin:1.3rem 0}
.liste-picto__item{display:flex;align-items:flex-start;gap:.7rem}
.liste-picto__item svg{width:18px;height:18px;color:var(--teal-800);flex:none;margin-top:.15rem}
.liste-picto__item p{margin:0;font-size:.9rem;line-height:1.65;color:var(--ink-70)}
@media(max-width:680px){.liste-picto{grid-template-columns:1fr}}
/* -------- Encart « Bon à savoir » -------- Même famille visuelle que
.a-venir (fond teal clair, bordure, icône), mais pour une information
utile et déjà disponible — jamais la connotation « contenu manquant »
d'.a-venir, qui reste réservée à ce seul usage. */
.encart{
background:var(--teal-050);border:1px solid var(--teal-200);border-radius:var(--r-lg);
padding:1.4rem 1.6rem;margin-block:1.8rem;display:flex;gap:1rem;align-items:flex-start;
}
.encart svg{width:20px;height:20px;color:var(--teal-800);flex:none;margin-top:2px}
.encart__body p{margin:0 0 .6rem;font-size:.9rem;color:var(--ink-70);line-height:1.65}
.encart__body p:last-child{margin-bottom:0}
/* -------- Pages dédiées (National/Communautaire/International) : un
.cadre-bloc par sous-type (Lois/Décret/Codes pour le national ; un seul
pour les deux autres), avec les textes en cartes-boutons plutôt qu'en
liste — la référence courte reste toujours visible, le titre complet
suit en dessous en plus petit (résout les titres trop longs). -------- */
.cadre-bloc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem 2rem;margin-top:1.5rem;border-left-width:4px}
.cadre-bloc--national{border-left-color:var(--teal-900)}
.cadre-bloc--communautaire{border-left-color:var(--teal-800)}
.cadre-bloc--international{border-left-color:var(--teal-600)}
.cadre-bloc h3{font-size:1.3rem;margin-bottom:.3rem}
.cadre-bloc__note{font-size:.85rem;color:var(--ink-45);margin-bottom:1.2rem}
.cadre-bloc__groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.cadre-group h4{font-size:.92rem;letter-spacing:.02em;margin-bottom:.7rem;color:var(--teal-800)}
.cadre-group--empty p{color:var(--ink-45);font-size:.86rem;line-height:1.6;margin:0}
.cadre-bloc--empty p{color:var(--ink-45);font-size:.9rem;line-height:1.6;margin:0}
.cadre-group__more{margin-top:.8rem;font-size:.82rem}
.cadre-group__more a{color:var(--teal-800);text-decoration:underline}
/* -------- Mission, Vision & Valeurs -------- Mission et Vision côte à
côte (moitié chacune), Valeurs fondamentales pleine largeur en
dessous, Objectifs stratégiques en infographie plus bas (mise en page
demandée telle quelle). Chaque cadre a sa propre couleur d'accent —
toujours dans la famille teal, jamais de bordeaux décoratif. -------- */
.mvv-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.3rem;margin-top:1.8rem}
.mvv-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal-800);border-radius:var(--r-lg);padding:1.8rem 1.9rem}
.mvv-card--vision{border-top-color:var(--teal-600)}
.mvv-card--valeurs{border-top-color:var(--teal-900);margin-top:1.3rem}
.mvv-card__icon{width:42px;height:42px;border-radius:10px;background:var(--teal-050);display:flex;align-items:center;justify-content:center;margin-bottom:1rem;flex:none}
.mvv-card__icon svg{width:22px;height:22px;color:var(--teal-800)}
.mvv-card--vision .mvv-card__icon svg{color:var(--teal-600)}
.mvv-card--valeurs .mvv-card__icon svg{color:var(--teal-900)}
.mvv-card h3{font-size:1.2rem;margin:0 0 .8rem;color:var(--teal-800)}
.mvv-card--vision h3{color:var(--teal-600)}
.mvv-card--valeurs h3{color:var(--teal-900)}
.mvv-card p{font-size:.92rem;line-height:1.65;color:var(--ink-70);margin:0 0 .9rem}
.mvv-card p:last-child{margin-bottom:0}
.mvv-card ul{margin:0 0 0 1.2rem;padding:0}
.mvv-card li{font-size:.9rem;line-height:1.7;color:var(--ink-70);margin-bottom:.5rem}
.mvv-card--valeurs__head{display:flex;align-items:center;gap:.8rem;margin-bottom:1.1rem}
.mvv-card--valeurs__head .mvv-card__icon{margin-bottom:0}
.mvv-card--valeurs__head h3{margin:0}
/* -------- Grille d'icônes réutilisable -------- Un titre court + texte
court par carte, chacune avec sa propre icône : Valeurs fondamentales
(Mission/Vision/Valeurs), Composition (Organe délibérant), Objectifs
du maillage (Antennes régionales). 3 colonnes par défaut ; le nombre
de colonnes s'adapte via une classe modificatrice si besoin. -------- */
.icon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);margin-top:1.3rem}
.icon-grid--2{grid-template-columns:repeat(2,1fr)}
.icon-card{background:#fff;padding:1.15rem 1.25rem;transition:background-color .25s var(--ease)}
.icon-card svg{width:19px;height:19px;color:var(--teal-800);margin-bottom:.55rem;transition:color .25s var(--ease)}
.icon-card__titre{font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:.3rem;transition:color .25s var(--ease)}
.icon-card p{font-size:.79rem;color:var(--ink-45);line-height:1.6;margin:0;transition:color .25s var(--ease)}
/* Couleur de survol propre à chaque carte (cycle des 3 teintes teal, comme
.cadre-link--1/2/3) plutôt qu'un effet uniforme identique sur les 6 —
distingue les valeurs entre elles au survol. */
.icon-card:nth-child(3n+1):hover{background:var(--teal-900)}
.icon-card:nth-child(3n+2):hover{background:var(--teal-800)}
.icon-card:nth-child(3n+3):hover{background:var(--teal-600)}
.icon-card:nth-child(3n+1):hover svg,
.icon-card:nth-child(3n+1):hover .icon-card__titre,
.icon-card:nth-child(3n+2):hover svg,
.icon-card:nth-child(3n+2):hover .icon-card__titre{color:#fff}
.icon-card:nth-child(3n+1):hover p,
.icon-card:nth-child(3n+2):hover p{color:rgba(255,255,255,.85)}
.icon-card:nth-child(3n+3):hover svg,
.icon-card:nth-child(3n+3):hover .icon-card__titre{color:var(--ink)}
.icon-card:nth-child(3n+3):hover p{color:var(--ink-70)}
/* -------- Objectifs stratégiques : mosaïque asymétrique -------- Choisie
parmi 3 propositions (grille 2x2, radiale, mosaïque) — l'objectif 1 est
mis en avant (c'est celui le plus proche du citoyen dans le texte),
les 3 autres restent égaux entre eux. Toujours dans la famille teal. -------- */
.objectifs-mosaic{display:grid;grid-template-columns:.68fr 1.5fr;grid-auto-rows:auto;gap:1.1rem;margin-top:1.8rem}
.objectif-tuile{border-radius:var(--r-lg);padding:1.6rem 1.7rem;display:flex;flex-direction:column;justify-content:space-between}
.objectif-tag{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:.6rem}
/* La tuile 1 remplit vraiment les 2 lignes qu'elle chevauche (stretch,
comportement par défaut de la grille) : plus étroite que les tuiles
2+3, son texte s'étale sur davantage de lignes. Le contenu ne remplit
toutefois pas tout à fait la hauteur avec un texte de cette longueur
à une largeur lisible : justify-content:center (au lieu du
space-between hérité) répartit l'espace restant en haut et en bas
plutôt qu'en un bloc au milieu — l'air paraît voulu, pas un oubli. */
.objectif-tuile--principal{background:var(--teal-900);color:#fff;grid-row:1/3;justify-content:center}
.objectif-tuile--principal .objectif-tag{opacity:.75}
.objectif-tuile--principal h3{font-size:1.1rem;line-height:1.4;margin:0;color:#fff}
.objectif-tuile--principal p{font-size:.83rem;line-height:1.6;opacity:.82;margin:1rem 0 0}
.objectif-tuile--secondaire{background:var(--teal-050)}
.objectif-tuile--secondaire .objectif-tag{color:var(--teal-800)}
.objectif-tuile--secondaire h3{font-size:.92rem;line-height:1.4;margin:0;color:var(--ink)}
.objectif-tuile--secondaire p{font-size:.78rem;line-height:1.55;color:var(--ink-45);margin:.6rem 0 0}
/* Même empilement titre au-dessus / texte en dessous que les tuiles
1-3 — pas d'agencement horizontal séparé à recalibrer, juste une
tuile pleine largeur avec un contenu dont la ligne reste lisible
(max-width) plutôt que de s'étirer d'un bord à l'autre. Centré dans
la largeur (align-items + text-align), pas aligné à gauche : la seule
tuile pleine largeur de la mosaïque, un bloc centré s'y lit mieux
qu'un bloc de texte perdu contre le bord gauche. */
.objectif-tuile--pleine{background:var(--teal-800);color:#fff;grid-column:1/-1;align-items:center;text-align:center;padding:1.7rem 2.2rem}
.objectif-tuile--pleine .objectif-tag{margin-bottom:.6rem;opacity:.75}
.objectif-tuile--pleine h3{font-size:1rem;line-height:1.4;margin:0 0 .6rem;color:#fff;max-width:800px}
.objectif-tuile--pleine p{font-size:.83rem;line-height:1.6;opacity:.82;margin:0;max-width:800px}
.textes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.9rem}
.textes-subgroup{margin-bottom:1.3rem}
.textes-subgroup:last-child{margin-bottom:0}
.textes-subgroup__label{display:block;font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-bottom:.6rem}
/* -------- Filtre local Documentation (Cadre Juridique et sous-pages,
Documents Stratégiques, Rapports) -------- */
.doc-filter{
display:flex;align-items:center;gap:.6rem;max-width:420px;margin:1.5rem 0 0;
padding:.65rem 1rem;border:1px solid var(--line);border-radius:100px;background:#fff;
transition:border-color .2s;
}
.doc-filter:focus-within{border-color:var(--teal-600)}
.doc-filter svg{width:16px;height:16px;color:var(--ink-45);flex:none}
.doc-filter__input{border:0;outline:0;font:inherit;font-size:.9rem;color:var(--ink);width:100%;background:none}
.doc-filter__input::placeholder{color:var(--ink-45)}
.doc-filter__empty{margin-top:1.5rem;font-size:.9rem;color:var(--ink-45)}
.texte-card{
display:flex;flex-direction:column;gap:.3rem;
background:var(--teal-050);border:1px solid var(--line);border-radius:var(--r);
padding:1rem 1.1rem;transition:border-color .25s,transform .25s var(--ease),box-shadow .25s;
}
a.texte-card:hover{border-color:var(--teal-200);transform:translateY(-2px);box-shadow:0 14px 28px -18px rgba(14,30,30,.2)}
.texte-card__ref{font-family:var(--ff-mono);font-size:.8rem;font-weight:700;color:var(--teal-800);letter-spacing:.01em}
.texte-card__titre{font-size:.82rem;color:var(--ink-70);line-height:1.4}
/* -------- Archive activités --------
.chip/.chip--light vivaient dans front.css, jamais chargé sur cette
archive (is_post_type_archive('ofnac_actualite') n'y figure pas) — les
onglets n'étaient donc jamais stylés. Déplacés ici (page.css, chargé
partout) avec les couleurs par catégorie. */
.chips--archive{display:flex;gap:.5rem;flex-wrap:wrap}
.chip--light{padding:.45rem 1rem;border-radius:100px;font-size:.8rem;font-weight:500;border:1px solid var(--line);color:var(--ink-70);transition:.25s}
.chip--light:hover{border-color:var(--teal-600);color:var(--teal-800)}
.chip--light[aria-pressed="true"]{background:var(--teal-800);color:#fff;border-color:var(--teal-800)}
/* Onglets de catégorie : 3 nuances de teal distinctes pour s'identifier
au premier coup d'œil — jamais de bordeaux, réservé au signal de
dénonciation. */
.chip--cat{border-width:1.5px;font-weight:600}
.chip--cat[data-cat="activites-evenements"]{border-color:var(--teal-900);color:var(--teal-900)}
.chip--cat[data-cat="activites-evenements"]:hover{background:var(--teal-050)}
.chip--cat[data-cat="activites-evenements"][aria-pressed="true"]{background:var(--teal-900);border-color:var(--teal-900);color:#fff}
.chip--cat[data-cat="audiences-visites"]{border-color:var(--teal-800);color:var(--teal-800)}
.chip--cat[data-cat="audiences-visites"]:hover{background:var(--teal-050)}
.chip--cat[data-cat="audiences-visites"][aria-pressed="true"]{background:var(--teal-800);border-color:var(--teal-800);color:#fff}
.chip--cat[data-cat="cooperation"]{border-color:var(--teal-600);color:var(--teal-600)}
.chip--cat[data-cat="cooperation"]:hover{background:var(--teal-050)}
/* teal-600 est la teinte la plus claire : du texte blanc dessus n'atteint
pas 4,5:1. Texte sombre (--ink) plutôt que d'assombrir la teinte, même
choix que les cartes citoyennes et le bloc International. */
.chip--cat[data-cat="cooperation"][aria-pressed="true"]{background:var(--teal-600);border-color:var(--teal-600);color:var(--ink)}
.archive-pagination{display:flex;gap:.5rem;justify-content:center;padding-block:3rem;font-family:var(--ff-mono);font-size:.85rem}
.archive-pagination .page-numbers{padding:.5rem .9rem;border-radius:8px;border:1px solid var(--line);color:var(--ink-70)}
.archive-pagination .page-numbers.current{background:var(--teal-800);color:#fff;border-color:var(--teal-800)}
.archive-pagination .page-numbers:hover{border-color:var(--teal-600);color:var(--teal-800)}
/* -------- Grille d'archive partagée (Activités, Coopération,
Audiences/Visites, Vidéothèque, Photos) : 3 colonnes / 2 / 1, 15
éléments par page (voir pre_get_posts côté PHP). Chaque contexte garde
l'habillage de sa propre carte (figure+légende ou .vid) ; seule la
forme de la grille est partagée, pas de grande tuile ici (chaque page
de pagination doit avoir des cartes uniformes). -------- */
.archive-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-block:2rem}
.archive-grid figure{position:relative;overflow:hidden;border-radius:var(--r);background:var(--teal-050);display:flex;flex-direction:column}
.archive-grid figure>a{display:flex;flex-direction:column;height:100%;color:inherit}
.archive-grid .gal__media{position:relative;overflow:hidden;aspect-ratio:4/3;display:block}
.archive-grid .gal__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.archive-grid figure:hover .gal__media img{transform:scale(1.08)}
/* Bande titre/date — bloc à part entière (jamais dans le même bloc de
texte qu'une description, pour éviter le bug de justification déjà
rencontré avec les badges), fond opaque, pas une légende en
surimpression sur la photo. Partagée par .gal (accueil) et
.archive-grid (archives et albums photo). */
.gal__cap{
position:static;flex:none;padding:.9rem 1rem 1rem;
background:var(--teal-900);color:#fff;display:flex;flex-direction:column;gap:.25rem;
}
.gal__cap strong{font-size:.92rem;font-weight:700;line-height:1.3}
.gal__cap span{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.04em;color:rgba(255,255,255,.75)}
@media(max-width:900px){.archive-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.archive-grid{grid-template-columns:1fr}}
/* .vids (front.css, utilisée sur l'archive Vidéothèque avec .archive-grid)
charge après page.css : à spécificité égale la règle la plus tardive
gagnerait sur .archive-grid seule — sélecteur composé pour verrouiller
la colonne indépendamment de l'ordre de chargement des feuilles. */
.vids.archive-grid{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.vids.archive-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.vids.archive-grid{grid-template-columns:1fr}}
/* Grille des photos à l'intérieur d'un album (Médiathèque › Photos,
?album=) : 4 colonnes, distincte de la grille 3 colonnes des cartes-
albums (même .archive-grid, sélecteur composé comme .vids ci-dessus). */
#photoGrid.archive-grid{grid-template-columns:repeat(4,1fr);gap:.9rem}
#photoGrid.archive-grid figure{aspect-ratio:1/1}
#photoGrid.archive-grid figure>a{height:100%}
#photoGrid.archive-grid img{width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:900px){#photoGrid.archive-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){#photoGrid.archive-grid{grid-template-columns:repeat(2,1fr)}}
/* -------- Médiathèque (fond clair, contrairement à .vid-wrap) -------- */
.vids--mediatheque{background:var(--paper);border-radius:var(--r-lg);padding:1.5rem}
.vids--mediatheque .vid{background:#fff;border-color:var(--line)}
.vids--mediatheque .vid h3{color:var(--ink)}
.vids--mediatheque .vid__theme{color:var(--teal-800)}
/* -------- Médiathèque : cartes d'atterrissage -------- */
.media-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.media-card{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.8rem;
display:flex;flex-direction:column;gap:.6rem;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s;
}
.media-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -26px rgba(14,30,30,.35);border-color:var(--teal-200)}
.media-card svg{width:28px;height:28px;color:var(--teal-800)}
.media-card h3{font-size:1.15rem}
.media-card p{font-size:.86rem;color:var(--ink-45);line-height:1.6}
.media-card__count{
margin-top:auto;padding-top:.6rem;font-family:var(--ff-mono);font-size:.72rem;
letter-spacing:.05em;text-transform:uppercase;color:var(--teal-800);
}
.media-card__count--soon{color:var(--ink-45)}
@media(max-width:900px){.media-cards{grid-template-columns:1fr}}
/* -------- Photos classées par activité -------- */
.media-group{margin-bottom:3rem}
.media-group__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;margin-bottom:1rem}
.media-group__head h2{font-size:1.3rem}
.media-group__head a{font-size:.85rem;color:var(--teal-800);white-space:nowrap}
.media-group__head a:hover{text-decoration:underline}
/* -------- Choix du régime de dénonciation (CDC §10.2) -------- */
.denoncer-choix{padding-block:clamp(48px,6vw,72px)}
/* 2 colonnes sur desktop : FAQ à gauche, choix du régime (vers la
plateforme externe) à droite. Empilées sous 900px, voir le @media
plus bas. */
.denoncer-choix__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start}
/* La FAQ (ofnac_wrap_qa_blocks) est injectée en tête de la colonne de
texte : pas de padding-block par défaut (le double-emploierait avec
.denoncer-choix), juste un espace avant "Choisissez votre régime". */
.page-content--flush{padding-block:0;margin-bottom:2.5rem}
.regime-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:2rem}
.regime-card{
text-align:left;background:#fff;border:2px solid var(--line);border-radius:var(--r-lg);
padding:1.6rem;transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.regime-card:hover{transform:translateY(-3px);box-shadow:0 20px 40px -28px rgba(14,30,30,.35)}
.regime-card h3,.regime-card h4{font-size:1.2rem;margin-bottom:.5rem;color:var(--teal-900)}
.regime-card p{font-size:.9rem;color:var(--ink-70);line-height:1.6}
.denoncer-demarche{margin-top:2.8rem;padding-top:2.4rem;border-top:1px solid var(--line)}
.denoncer-demarche:first-of-type{margin-top:2rem;padding-top:0;border-top:none}
.denoncer-demarche__titre{font-size:1.05rem;color:var(--ink);margin-bottom:.4rem}
.denoncer-demarche p.lede{margin-top:0}
.regime-compare-wrap{overflow-x:auto;margin-top:2rem}
.regime-compare{width:100%;border-collapse:collapse;font-size:.88rem}
.regime-compare th,.regime-compare td{padding:.75rem 1rem;border-bottom:1px solid var(--line);text-align:left}
.regime-compare thead th{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--teal-800)}
.regime-compare tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.regime-detail__placeholder{color:var(--ink-45);font-size:.92rem;margin-top:1rem}
.denoncer-alt{margin-top:2.5rem;font-size:.85rem;color:var(--ink-45)}
@media(max-width:900px){
.denoncer-choix__grid{grid-template-columns:1fr}
.denoncer-choix__form{margin-top:2.5rem}
}
@media(max-width:680px){.regime-grid{grid-template-columns:1fr}}
/* -------- Grille partenaires (archive) -------- */
.prt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1rem}
.prt--archive{width:auto;height:auto;min-height:104px}
/* -------- Cadre d'introduction (texte de présentation en haut de page) --------
Habillage "carte" — bordure + ombre portée — pour distinguer un chapô
éditorial d'un simple paragraphe nu. Bordure pleine (≠ .a-venir, qui reste
en pointillés : ce dernier signale un contenu provisoire, pas celui-ci). */
.intro-frame{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:0 24px 48px -32px rgba(14,30,30,.22);
padding:1.8rem 2rem;margin-block:2rem;max-width:900px;
}
.intro-frame p{margin-bottom:1rem}
.intro-frame p:last-child{margin-bottom:0}
/* Assemblée des Membres : cadre centré avec contour teal, pour le
distinguer visuellement du cadre neutre utilisé ailleurs (ex. Anciens
Membres, non concerné par cette demande). */
.intro-frame--centre{margin-inline:auto;border:2px solid var(--teal-600)}
/* -------- Cadres question/réponse (FAQ /denoncer/, via ofnac_wrap_qa_blocks)
-------- même habillage que .intro-frame, un cadre distinct par bloc. */
.qa-frame{
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:0 24px 48px -32px rgba(14,30,30,.22);
padding:1.6rem 1.8rem;margin-bottom:1.2rem;
transition:background-color .25s,border-color .25s;
}
.qa-frame:hover{background:var(--teal-050);border-color:var(--teal-200)}
.qa-frame:last-child{margin-bottom:0}
.qa-frame h3{margin:0 0 .7rem;font-size:1.05rem;color:var(--teal-900)}
.qa-frame p,.qa-frame ul{margin-bottom:.8rem}
.qa-frame p:last-child,.qa-frame ul:last-child{margin-bottom:0}
.qa-frame ul{margin-left:1.3rem}
/* -------- Cadres d'information (coordonnées /contact/) --------
Un cadre par bloc, icône + valeur mise en avant (le label reste un
repère secondaire, petites capitales grises). Standard/N° Vert/Email
sont de vrais liens (tel:/mailto:, toute la carte cliquable) : eux
seuls réagissent au survol. Adresse reste une carte simple (rien à
cliquer d'utile ici — la carte de situation est juste en dessous). */
.info-frame{
display:flex;align-items:flex-start;gap:.9rem;
background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
box-shadow:0 24px 48px -32px rgba(14,30,30,.22);
padding:1.3rem 1.5rem;text-decoration:none;color:inherit;
transition:background-color .25s,border-color .25s;
}
.info-frame__icon{flex:none;width:22px;height:22px;color:var(--teal-800)}
.info-frame__icon svg{width:100%;height:100%}
.info-frame__body{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.info-frame strong{font-family:var(--ff-mono);font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-45)}
.info-frame__value{font-size:1rem;font-weight:600;color:var(--ink);line-height:1.3;word-break:break-word}
.info-frame--link:hover{background:var(--teal-050);border-color:var(--teal-200)}
/* N° Vert : seul cadre de contact mis en avant en teal plein (appel
gratuit — l'information la plus utile à repérer au premier coup
d'œil), les autres cadres restent neutres. */
.info-frame--teal{background:var(--teal-800);border-color:var(--teal-800)}
.info-frame--teal .info-frame__icon{color:#fff}
.info-frame--teal strong{color:rgba(255,255,255,.75)}
.info-frame--teal .info-frame__value{color:#fff}
.info-frame--teal.info-frame--link:hover{background:var(--teal-900);border-color:var(--teal-900)}
/* Cadre email à plusieurs adresses : une ligne par mailto:, même
gabarit typographique qu'un info-frame__value simple. */
.info-frame__value--link{color:var(--teal-800);text-decoration:none}
.info-frame__value--link:hover{text-decoration:underline}
/* Sur /contact/ : les blocs alignés sur une même ligne au lieu
d'empilés — 2 colonnes en dessous de 900px, 1 seule (empilé) en
dessous de 560px. */
.info-frame-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-bottom:2.5rem}
@media(max-width:900px){.info-frame-row{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.info-frame-row{grid-template-columns:1fr}}
/* -------- Assemblée des Membres : composition actuelle --------
Code couleur par rôle (famille teal uniquement — le bordeaux reste réservé
au signal, jamais décoratif ici) : liseré + libellé de rôle teintés,
du plus soutenu (Président) au plus doux (Membre). Même classes réutilisées
sur /assemblee-membres/anciens-membres/. */
.membres-direction{display:grid;grid-template-columns:repeat(2,minmax(0,240px));gap:1.2rem;justify-content:center;margin-top:1.5rem}
.membres-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.2rem;margin-top:2rem;max-width:none}
.membre-card{background:#fff;border:1px solid var(--line);border-top:4px solid var(--teal-200);border-radius:var(--r-lg);overflow:hidden;text-align:center}
.membre-card--president{border-top-color:var(--teal-900)}
.membre-card--vice-president{border-top-color:var(--teal-600)}
.membre-card__photo{
aspect-ratio:3/4;background:var(--teal-050);border-bottom:1px solid var(--line);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;
overflow:hidden;
}
/* aspect-ratio:3/4 — même proportion que .membre-bio__photo (pages
Président/Vice-Président), pour un cadre de taille comparable à celle
d'avant le recadrage carré (aspect-ratio:1, trop resserré : voir §feedback
utilisateur). Sans la règle ci-dessous sur l'![]()
, la photo (vignette WP
'medium', généralement plus haute que large) s'affichait à sa taille
naturelle et étirait la boîte au lieu de se recadrer dans le cadre prévu —
un vrai crop était nécessaire pour que le point focal (ci-dessous) ait un
effet visible.
--zoom/--fx/--fy : custom properties posées en style inline par
ofnac_membre_photo_vars() (inc/meta-boxes-pages.php), résolues à partir
des réglages "Photo : point focal et zoom" de chaque fiche membre — avec
repli sur la même valeur neutre par défaut (zoom 1, 50%/35%) si la fiche
n'a jamais été ajustée. object-position choisit la zone visible dans le
crop carré ; le transform scale+origin ajoute un zoom optionnel ancré au
même point, pour égaliser l'impression de cadrage entre des photos aux
compositions d'origine différentes (gros plan visage vs plan buste plus
large) — un simple object-position ne peut pas corriger ça seul, il ne
fait que déplacer le cadrage, jamais l'agrandir. */
.membre-card__photo img{
width:100%;height:100%;object-fit:cover;
object-position:var(--fx,50%) var(--fy,35%);
transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,35%);
}
.membre-card__photo svg{width:26px;height:26px;color:var(--teal-200)}
.membre-card__body{padding:1rem .8rem 1.2rem}
.membre-card h3{font-size:.92rem;line-height:1.3;margin-bottom:.3rem}
.membre-card__role{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-800);margin:0;text-align:center}
.membre-card--president .membre-card__role{color:var(--teal-900);font-weight:700}
.membre-card--vice-president .membre-card__role{color:var(--teal-600)}
.membre-card__year{font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.05em;color:var(--ink-45);margin:0;text-align:center}
/* -------- Fiche membre (single-ofnac_membre.php) -------- */
.membre-infos{display:grid;gap:.7rem;margin:2rem 0;max-width:520px}
.membre-infos__item{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.membre-infos__label{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-45);flex:none}
.membre-infos__value{font-size:.9rem;color:var(--ink);text-align:right}
/* -------- Biographie + photo (pages Président / Vice-Président) -------- */
.membre-bio{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start;margin-top:1.5rem}
.membre-bio__text{color:var(--ink-70);line-height:1.75;font-size:1.02rem}
.membre-bio__text p{margin-bottom:1.2rem}
.membre-bio__text--empty{color:var(--ink-45);font-size:.92rem;line-height:1.6}
/* .membre-bio__aside : colonne sticky qui suit le défilement, regroupant
la photo ET sa légende (nom/fonction) — la légende doit rester collée
sous la photo pendant le scroll, donc c'est ce conteneur qui est sticky
(pas la photo seule) ; la photo redevient un bloc normal à l'intérieur.
Même mécanisme que .fiche-panel (Présentation de l'OFNAC), même valeur de
top pour rester alignée si les deux apparaissent sur des pages voisines. */
.membre-bio__aside{position:sticky;top:130px}
.membre-bio__photo{
aspect-ratio:3/4;border-radius:var(--r-lg);overflow:hidden;background:var(--teal-050);
border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
}
/* Même mécanisme point focal/zoom que .membre-card__photo (voir ce
commentaire) — cohérence de cadrage entre la vignette de l'Assemblée et
la grande photo des pages Président/Vice-Président. */
.membre-bio__photo img{
width:100%;height:100%;object-fit:cover;
object-position:var(--fx,50%) var(--fy,35%);
transform:scale(var(--zoom,1));transform-origin:var(--fx,50%) var(--fy,35%);
}
.membre-bio__photo svg{width:32px;height:32px;color:var(--teal-200)}
.membre-bio__caption{margin-top:1rem;text-align:center}
.membre-bio__caption .signature__nom{font-size:1.1rem}
.membre-bio__caption .signature__titre{margin-top:.3rem}
.membre-bio__caption .btn{margin-top:1rem}
@media(max-width:900px){
.membre-bio{grid-template-columns:1fr}
.membre-bio__aside{max-width:260px;margin-inline:auto;position:static}
}
@media(max-width:900px){.membres-grid{grid-template-columns:repeat(3,1fr)}.membres-direction{grid-template-columns:repeat(2,minmax(0,200px))}}
@media(max-width:600px){.membres-grid{grid-template-columns:1fr 1fr}.membres-direction{grid-template-columns:1fr;max-width:240px;margin-inline:auto}}
/* -------- Assemblée des Membres : anciens membres (accordéon natif) -------- */
.anciens{margin-top:2.5rem;max-width:none}
.anciens > summary{
cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:.5rem;
font-family:var(--ff-mono);font-size:.82rem;font-weight:600;color:var(--teal-800);
padding:.7rem 1.3rem;border:1.5px solid var(--teal-600);border-radius:100px;transition:.25s var(--ease);
}
.anciens > summary::-webkit-details-marker{display:none}
.anciens > summary:hover{background:var(--teal-050)}
.anciens > summary svg{width:13px;height:13px;transition:transform .3s var(--ease)}
.anciens[open] > summary svg{transform:rotate(180deg)}
.anciens__body{margin-top:1.5rem;display:grid;gap:1.2rem}
.anciens-cat{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:1.5rem 1.8rem}
.anciens-cat h4{font-size:.95rem;margin-bottom:1rem;color:var(--teal-900)}
.anciens-cat ul{list-style:none;margin:0;display:grid;gap:.5rem}
.anciens-cat li{font-size:.86rem;line-height:1.6;color:var(--ink-70);padding-left:1rem;position:relative}
.anciens-cat li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--teal-600)}
.anciens-year{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.04em;color:var(--ink-45)}
.anciens-group{margin-bottom:.9rem}
.anciens-group:last-child{margin-bottom:0}
.anciens-group .anciens-year{display:block;margin:0 0 .3rem}
.anciens-group p{font-size:.86rem;line-height:1.6;color:var(--ink-70);margin:0}
/* -------- FAQ Citoyen : accordéon natif (aucun JS) -------- */
.faq-list{display:grid;gap:1rem;margin-top:1rem}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.faq-item[open]{border-color:var(--teal-200)}
.faq-item summary{
cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:1.2rem 1.6rem;font-weight:600;color:var(--ink);transition:background-color .2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{background:var(--teal-050)}
.faq-item summary svg{width:18px;height:18px;flex:none;color:var(--teal-600);transition:transform .25s var(--ease)}
.faq-item[open] summary svg{transform:rotate(180deg)}
.faq-item__body{padding:0 1.6rem 1.4rem;font-size:.92rem;line-height:1.7;color:var(--ink-70)}
.faq-item__body p{margin-bottom:.8rem}
.faq-item__body p:last-child{margin-bottom:0}
.faq-item__body ul,.faq-item__body ol{margin:0 0 .8rem 1.3rem}
.faq-item__body li{margin-bottom:.4rem}
/* -------- Placeholder [À REMPLACER] -------- */
.a-remplacer{
display:inline-flex;align-items:center;gap:.4rem;
background:var(--bord-050);color:var(--bord-800);border:1px dashed var(--bord-600);
border-radius:6px;padding:.15rem .6rem;font-family:var(--ff-mono);font-size:.78rem;
font-weight:600;letter-spacing:.02em;
}
/* -------- Visionneuse PDF (Documentation, étape 7) -------- Chargement
différé au scroll (CDC §5.5) : voir assets/js/pdf-viewer.js. L'iframe
reste [hidden] et l'iris de chargement visible jusqu'à ce que le PDF
ait fini de charger (.pdf-viewer__frame-wrap.is-loaded). -------- */
.pdf-viewer{margin-top:1.5rem}
.pdf-viewer__actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.pdf-viewer__meta{font-family:var(--ff-mono);font-size:.78rem;color:var(--ink-45);letter-spacing:.02em}
.pdf-viewer__frame-wrap{
position:relative;margin-top:1.2rem;display:flex;align-items:center;justify-content:center;
min-height:420px;height:75vh;max-height:900px;
border:1px solid var(--line);border-radius:var(--r-lg);background:var(--ink-05,#f4f4f4);
}
.pdf-viewer__loading{display:flex}
.pdf-viewer__frame-wrap.is-loaded .pdf-viewer__loading{display:none}
.pdf-viewer__frame{width:100%;height:100%;border:0;border-radius:var(--r-lg)}
.pdf-viewer__frame[hidden]{display:none}
.pdf-viewer__frame p{padding:1.5rem;font-size:.9rem;color:var(--ink-70)}
/* -------- Lightbox photo (Médiathèque › Photos, album) -------- Vanilla,
voir assets/js/lightbox.js. .lightbox définissant elle-même display,
cette règle d'auteur écraserait le display:none par défaut du
navigateur pour [hidden] — d'où le [hidden]{display:none} explicite
ci-dessous. -------- */
.lightbox{
position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;
background:rgba(14,30,30,.94);padding:clamp(16px,5vw,64px);
}
.lightbox[hidden]{display:none}
.lightbox__figure{max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:.8rem;margin:0}
.lightbox__img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--r);display:block;margin-inline:auto}
.lightbox__caption{color:rgba(255,255,255,.8);font-size:.88rem;text-align:center}
.lightbox__close,.lightbox__prev,.lightbox__next{
position:fixed;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
background:rgba(255,255,255,.1);color:#fff;transition:background .2s,transform .2s;
}
.lightbox__close:hover,.lightbox__prev:hover,.lightbox__next:hover{background:rgba(255,255,255,.22)}
.lightbox__close svg,.lightbox__prev svg,.lightbox__next svg{width:20px;height:20px}
.lightbox__close{top:1.2rem;right:1.2rem}
.lightbox__prev{left:1.2rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1.2rem;top:50%;transform:translateY(-50%)}
.lightbox__prev:hover{transform:translateY(-50%) translateX(-2px)}
.lightbox__next:hover{transform:translateY(-50%) translateX(2px)}
@media(max-width:680px){
.lightbox__prev,.lightbox__next{width:38px;height:38px}
.lightbox__prev{left:.5rem}
.lightbox__next{right:.5rem}
.lightbox__close{top:.5rem;right:.5rem}
}
@media(max-width:900px){
.cadre-links{grid-template-columns:1fr}
.cadre-bloc{padding:1.5rem 1.4rem}
.cadre-bloc__groups{grid-template-columns:1fr}
.mvv-grid{grid-template-columns:1fr}
.icon-grid{grid-template-columns:1fr 1fr}
.objectifs-mosaic{grid-template-columns:1fr}
.objectif-tuile--principal{grid-row:auto}
}
@media(max-width:560px){
.icon-grid{grid-template-columns:1fr}
}
/* -------- Contact : formulaire + carte -------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,4vw,3.5rem);align-items:start;margin-top:2.5rem}
.contact-form{margin-top:1.2rem}
.contact-form__honeypot{position:absolute;left:-9999px}
.contact-form__field{margin-bottom:1.1rem}
.contact-form__field label{display:block;font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-45);margin-bottom:.4rem}
.contact-form__field input,.contact-form__field textarea{
width:100%;border:1.5px solid var(--line);border-radius:var(--r);padding:.75rem .9rem;
font-family:var(--ff-body);font-size:.92rem;color:var(--ink);outline:none;transition:border-color .2s;
}
.contact-form__field input:focus,.contact-form__field textarea:focus{border-color:var(--teal-600)}
.contact-form__field textarea{resize:vertical}
.form-notice{background:var(--teal-050);border:1px solid var(--teal-200);border-radius:var(--r-lg);padding:1rem 1.2rem;margin-bottom:1.2rem}
.form-notice p{margin:0;font-size:.9rem;color:var(--ink-70)}
.form-notice--error{background:var(--bord-050);border-color:var(--bord-600)}
.form-notice--error p{color:var(--bord-800)}
.contact-grid__map{margin-top:1.2rem}
.contact-grid__map iframe{width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:var(--r-lg)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
/* -------- Recherche (search.php, 404.php) -------- */
.search-form{display:flex;gap:.8rem;max-width:560px;margin-block:2rem}
.search-form input[type=search]{
flex:1;border:1.5px solid var(--line);border-radius:var(--r);padding:.8rem 1.1rem;
font-family:var(--ff-body);font-size:.95rem;color:var(--ink);outline:none;transition:border-color .2s;
}
.search-form input[type=search]:focus{border-color:var(--teal-600)}
.search-form__count{font-size:.85rem;color:var(--ink-45);margin-bottom:1.5rem}
.search-results{display:flex;flex-direction:column;gap:1rem;margin-bottom:2rem}
.search-result{
display:block;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
padding:1.3rem 1.6rem;text-decoration:none;color:inherit;transition:border-color .25s,transform .25s var(--ease);
}
.search-result:hover{border-color:var(--teal-200);transform:translateY(-2px)}
.search-result__type{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.05em;text-transform:uppercase;color:var(--teal-800)}
.search-result__title{font-size:1.1rem;margin:.3rem 0 .4rem;color:var(--ink)}
.search-result__excerpt{font-size:.88rem;color:var(--ink-70);line-height:1.6;margin:0}
@media(max-width:560px){.search-form{flex-direction:column}}
/* -------- Bannière "Liste provisoire des assujettis" (composant autonome,
refonte v2, 2026-08 : fond clair + illustration linework, un seul
élément bordeaux — le bouton). Pas de logo (déjà dans le header). -------- */
.assuj-banniere{
position:relative;overflow:hidden;display:grid;grid-template-columns:1.3fr .9fr;gap:2.2rem;align-items:center;
background:var(--teal-050);border:1px solid var(--teal-200);
border-radius:var(--r-lg);text-decoration:none;color:var(--ink);margin-block:2.5rem;
transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.assuj-banniere:hover{transform:translateY(-3px);box-shadow:0 24px 48px -24px rgba(27,89,89,.25)}
.assuj-banniere__body{position:relative;z-index:2;padding:2.6rem 0 2.6rem 2.6rem}
.assuj-banniere__tag{
display:inline-flex;align-items:center;background:var(--teal-800);color:#fff;
font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
padding:.55rem 1.1rem;border-radius:8px;margin-bottom:1.2rem;font-weight:600;
}
.assuj-banniere__titre{display:block;font-family:var(--ff-display);font-size:clamp(1.8rem,3.2vw,2.6rem);font-weight:800;margin:0 0 .5rem;line-height:1.1;letter-spacing:-.01em;color:var(--ink)}
.assuj-banniere__sub{display:block;font-family:var(--ff-display);font-weight:700;font-size:clamp(1rem,1.4vw,1.15rem);color:var(--teal-800);margin:0 0 1.1rem;max-width:34ch;line-height:1.4}
.assuj-banniere__tagline{display:block;font-size:.92rem;font-style:italic;color:var(--ink-70);margin-bottom:1.5rem}
.assuj-banniere__cta{
position:relative;z-index:2;display:inline-flex;align-items:center;gap:.6rem;
background:var(--bord-600);color:#fff;font-weight:700;font-size:.95rem;padding:.9rem 1.6rem;
border-radius:100px;white-space:nowrap;transition:background .2s var(--ease);
}
.assuj-banniere:hover .assuj-banniere__cta{background:var(--bord-800)}
.assuj-banniere__cta svg{width:18px;height:18px;flex:none}
/* Illustration flat/line (écran + document + recherche + validation) —
aucun rendu 3D/stock, cercles jamais étirés (width=height explicites). */
.assuj-banniere__art{position:relative;z-index:2;aspect-ratio:1/1;max-width:230px;justify-self:end;margin-right:2rem}
.assuj-banniere__art svg{width:100%;height:100%;display:block}
/* Vague décorative en pied de bannière, jamais de bordeaux ici (le bouton
est le seul élément bordeaux du composant). */
.assuj-banniere__wave{position:absolute;left:0;right:0;bottom:0;height:30%;z-index:1;pointer-events:none}
.assuj-banniere__wave svg{width:100%;height:100%;display:block}
@media(max-width:680px){
.assuj-banniere{grid-template-columns:1fr}
.assuj-banniere__body{padding:2rem 1.6rem 1.6rem}
.assuj-banniere__art{max-width:170px;margin:0 auto 1.4rem;justify-self:center}
.assuj-banniere__sub{max-width:none}
}
/* Variante "événement" (4e modèle de slide hero, ex. point de presse) —
design "fiche pratique" : composition à part du modèle "assujettis"
(pas juste un reskin), pas de lien (pas de destination dédiée) ni
d'illustration __art. 2 colonnes : texte à gauche, encadré détaché à
droite (fond blanc, bordure) qui isole les informations pratiques —
chacune avec son étiquette (DATE/HEURE/…) au-dessus de sa valeur, pas
un flux de texte continu. Fond clair uni derrière tout le contenu (pas
de vague décorative sur cette variante) : contraste mesuré ~15,6:1
(texte sombre sur --teal-050) et ~17:1 (texte sombre sur blanc de la
fiche), largement au-dessus du seuil WCAG AA de 4,5:1. */
.assuj-banniere--annonce{grid-template-columns:1.2fr 1fr;column-gap:2rem;cursor:default;align-items:start}
.assuj-banniere--annonce:hover{transform:none;box-shadow:none}
.assuj-banniere--annonce .assuj-banniere__body{padding:2rem 0 2rem 2.6rem}
.assuj-banniere--annonce .assuj-banniere__tag{margin-bottom:.85rem}
.assuj-banniere--annonce .assuj-banniere__titre{font-size:clamp(1.5rem,2.6vw,2.05rem);margin-bottom:.6rem}
.assuj-banniere__texte{display:block;font-size:.96rem;line-height:1.55;color:var(--ink-70);max-width:52ch}
.assuj-banniere__fiche{
align-self:center;margin:2rem 2.6rem 2rem 0;background:#fff;border:1px solid var(--teal-200);
border-radius:14px;padding:1.2rem 1.3rem;display:flex;flex-direction:column;gap:.9rem;
}
.assuj-banniere__fiche-item{display:grid;grid-template-columns:20px 1fr;gap:.6rem;align-items:start}
.assuj-banniere__fiche-item svg{width:18px;height:18px;color:var(--teal-800)}
.assuj-banniere__fiche-label{display:block;font-family:var(--ff-mono);font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-45);margin-bottom:.15rem}
.assuj-banniere__fiche-value{display:block;font-size:.87rem;font-weight:700;color:var(--ink);line-height:1.4}
@media(max-width:680px){
.assuj-banniere--annonce{grid-template-columns:1fr}
.assuj-banniere--annonce .assuj-banniere__body{padding:1.8rem 1.6rem 0}
.assuj-banniere__fiche{margin:1.2rem 1.6rem 1.8rem}
}