/* public/site.css — Montargis répond, LOT-MR-V0.
   Jetons relevés dans l'export Design du 21/09/2026 (voir _design/jetons.md) : le design gagne sur le
   brief, sauf sur les interdits. Propriétés LOGIQUES partout (inline/block) : la page arabe est un
   MIROIR réel, pas un alignement de texte. Aucun :invalid stylé — une erreur ne se montre qu'après le
   bouton, jamais pendant la frappe (test : porte/interdits.test.mjs). */

@font-face {
  font-family: 'Source Sans 3';
  src: url(/fonts/source-sans-3.woff2) format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url(/fonts/noto-sans-arabic.woff2) format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200F;
}

:root {
  --pierre: #F4F1EA; --encre: #1F2A2E; --vert: #2F5B50; --ocre: #C89A45; --nuit: #14213D; --terra: #A64B2A;
  --sable: #E9E4D8;      /* bandeau d'indépendance + pied (design A/B) */
  --vert-clair: #A8CFC1; /* « répond » sur le hero */
  --vert-fonce: #23443C; /* survol */
  --texte-2: #2B3438;    /* corps du message d'accueil */
  --texte-3: #4B5257;    /* ligne AWA */
  --texte-4: #5C6468;    /* langues non actives */
  --trait: #6B6A63;      /* bord des champs, numéro de version (AA ; le design disait #9A9891) */
  --latin: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', system-ui, 'Helvetica Neue', Arial, sans-serif;
  --arabe: 'Noto Sans Arabic', 'Source Sans 3', 'Noto Naskh Arabic', 'Geeza Pro', 'Segoe UI', system-ui, sans-serif;
  --gouttiere: 20px;
}
@media (min-width: 760px) { :root { --gouttiere: 56px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--pierre); color: var(--encre);
  font-family: var(--latin); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-wrap: anywhere;
}
:lang(ar) { font-family: var(--arabe); }
:lang(fr), :lang(tr), :lang(pt), :lang(en) { font-family: var(--latin); }
p, h1, h2, dl, dd, figure { margin: 0; }
img, svg { display: block; max-width: 100%; }
a { color: var(--vert); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--vert-fonce); }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }
.cadre { width: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gouttiere); }
.visuel-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── le numéro de version : 70×15, coin haut droit (haut gauche en arabe, cadre C), permanent ── */
.version {
  position: fixed; top: 0; right: 0; z-index: 10; /* PHYSIQUE, pas logique : direction ltr ci-dessous retournerait inset-inline-end */
  width: 70px; height: 15px; overflow: hidden;
  font: 11px/15px var(--latin); color: var(--trait); text-align: center; direction: ltr;
  background: rgba(244, 241, 234, .9); border-end-start-radius: 4px;
  pointer-events: none;
}
[dir="rtl"] .version { right: auto; left: 0; border-end-start-radius: 0; border-end-end-radius: 4px; } /* cadre C : haut gauche */

/* ── en-tête : marque (sauf accueil téléphone) + langues, courante en premier ── */
.entete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; padding-block: 14px 0; }
.marque { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--encre); font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.marque .embleme { width: 40px; height: 40px; flex-shrink: 0; } /* le sourire occupe le tiers central du carré 512 */
.marque b, .titre-site b { font-weight: inherit; color: var(--vert); }
.entete--accueil .marque { display: none; }
.langues ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; column-gap: 10px; }
/* la place du numéro de version : l'en-tête commence SOUS lui (padding-block 14px), pas à côté */
.langues a {
  display: inline-flex; align-items: center; min-height: 44px; padding-inline: 2px;
  font-size: 15px; color: var(--texte-4); text-decoration: none;
}
.langues a[aria-current] { color: var(--vert); font-weight: 700; }
.langues a[aria-current] span { border-bottom: 2px solid var(--vert); padding-bottom: 1px; }
.langues a:hover { color: var(--vert); }
@media (min-width: 760px) {
  .entete { padding-block: 14px; }
  .entete--accueil .marque { display: inline-flex; }
  .marque { font-size: 21px; }
  .marque .embleme { width: 46px; height: 46px; }
  .langues ul { column-gap: 20px; }
  .langues a { font-size: 16px; }
}

/* ── hero (cadres A/C téléphone, B PC) ── */
.hero { position: relative; height: 430px; overflow: hidden; background: var(--nuit); }
.hero picture, .hero img { width: 100%; height: 100%; }
.hero img { object-fit: cover; }
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(20,33,61,0) 34%, rgba(20,33,61,.62) 62%, rgba(20,33,61,.88) 100%);
}
.hero-texte { position: absolute; inset-inline: 0; bottom: 0; z-index: 1; padding-block-end: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.hero-texte .embleme { width: 72px; height: 72px; margin-block: -14px -10px; } /* le carré a du vide au-dessus et au-dessous du trait */
.titre-site { font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1.1; color: #FFFFFF; }
.titre-site b { color: var(--vert-clair); }
.tagline { font-size: 19px; line-height: 1.35; color: var(--pierre); }
:lang(ar) .titre-site { line-height: 1.4; letter-spacing: 0; }
:lang(ar) .tagline { line-height: 1.6; }
@media (min-width: 760px) {
  .hero { height: 460px; }
  .hero::after { background: linear-gradient(to right, rgba(20,33,61,.78) 0%, rgba(20,33,61,.5) 44%, rgba(20,33,61,.12) 78%); }
  [dir="rtl"] .hero::after { background: linear-gradient(to left, rgba(20,33,61,.78) 0%, rgba(20,33,61,.5) 44%, rgba(20,33,61,.12) 78%); }
  .hero-texte { top: 0; justify-content: center; gap: 18px; padding-block-end: 0; }
  .hero-texte .embleme { width: 100px; height: 100px; margin-block: -20px -14px; }
  .titre-site { font-size: 56px; letter-spacing: -.02em; line-height: 1.05; }
  .tagline { font-size: 26px; max-width: 620px; }
}

.bandeau { background: var(--sable); }
.bandeau p { padding-block: 12px; font-size: 16px; line-height: 1.35; font-weight: 600; }
:lang(ar) .bandeau p { line-height: 1.7; }
@media (min-width: 760px) { .bandeau p { padding-block: 14px; font-size: 17px; } }

.arche { display: flex; justify-content: center; padding-block: 26px 4px; }
.arche svg { width: 108px; height: 28.8px; } /* viewBox 120×32 (retour de Chat 22/09 : le bas de l'arc n'est plus rogné) */
@media (min-width: 760px) { .arche { padding-block: 52px 0; } .arche svg { width: 148px; height: 39.47px; } }

/* ── les trois portes : <details>, lisibles et dépliables SANS JavaScript ── */
.portes { display: grid; gap: 12px; padding-block-start: 14px; align-items: start; }
.porte { background: #FFFFFF; border-radius: 16px; box-shadow: 0 2px 8px rgba(31,42,46,.07); transition: transform .16s, box-shadow .16s; }
.porte:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(31,42,46,.13); }
.porte summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 20px; min-height: 64px; font-size: 21px; font-weight: 600; border-radius: 16px;
}
.porte summary::-webkit-details-marker { display: none; }
/* MR-V0-B, regard du visiteur : au toucher, le navigateur peignait la carte en BLEU CLAIR (surbrillance par défaut),
   étrangère au design. Retirée ; le clavier garde son contour (:focus-visible). */
.porte summary { -webkit-tap-highlight-color: transparent; }
.porte summary svg { width: 22px; height: 22px; flex-shrink: 0; transition: transform .16s; }
[dir="rtl"] .porte summary svg { transform: scaleX(-1); }
.porte[open] summary svg { transform: rotate(90deg); }
[dir="rtl"] .porte[open] summary svg { transform: scaleX(-1) rotate(90deg); }
.porte-note { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; color: var(--texte-2); }
.porte-sous { font-weight: 600; color: var(--encre); }
.porte-note a { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
/* le lien « écrivez-nous » DANS la phrase de la porte fermée (retour de Chat 22/09) : en ligne, zone de toucher agrandie */
.porte-note p a { display: inline; min-height: 0; padding-block: 12px; }
@media (min-width: 760px) {
  .portes { padding-block-start: 28px; gap: 24px; }
  .porte { border-radius: 18px; }
  .porte:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,42,46,.14); }
  .porte summary { padding: 32px; min-height: 120px; font-size: 28px; gap: 16px; border-radius: 18px; }
  .porte summary svg { width: 26px; height: 26px; }
  .porte-note { padding: 0 32px 28px; font-size: 17px; }
}
@media (min-width: 1024px) { .portes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.accueil-message { padding-block: 30px 4px; }
.accueil-message p { font-size: 16px; line-height: 1.62; color: var(--texte-2); text-wrap: pretty; max-width: 900px; }
.accueil-message strong { font-weight: 600; color: var(--encre); }
:lang(ar) .accueil-message p { line-height: 1.95; }
@media (min-width: 760px) { .accueil-message { padding-block: 64px 0; } .accueil-message p { font-size: 20px; line-height: 1.65; } }

/* ── boutons ── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  border-radius: 12px; font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--vert); transition: background .16s; touch-action: manipulation;
}
.bouton.plein { background: var(--vert); color: #FFFFFF; }
.bouton.plein:hover { background: var(--vert-fonce); color: #FFFFFF; }
.bouton.contour { background: transparent; color: var(--vert); }
.bouton.contour:hover { background: rgba(47,91,80,.08); }
.bouton.petit { min-height: 44px; font-size: 16px; padding: 0 18px; }

/* ── pied de page (toutes pages) ── */
.pied { margin-top: 28px; background: var(--sable); }
.pied-dedans { display: flex; flex-direction: column; gap: 14px; padding-block: 22px 26px; }
.pied-actions { display: flex; flex-direction: column; gap: 10px; }
.pied-actions .bouton { width: 100%; }
.pied-textes { display: flex; flex-direction: column; gap: 10px; }
.pied-independance { font-size: 15px; line-height: 1.45; font-weight: 600; }
.pied-liens { display: flex; flex-wrap: wrap; column-gap: 20px; }
.pied-liens a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
.pied-awa { font-size: 14px; line-height: 1.5; color: var(--texte-3); }
.pied-awa a { padding-block: 12px; } /* lien DANS une phrase : zone de toucher agrandie sans casser l'interligne */
:lang(ar) .pied-independance { line-height: 1.7; }
@media (min-width: 760px) {
  .pied { margin-top: 64px; }
  .pied-dedans { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 64px; padding-block: 36px 42px; }
  .pied-textes { order: -1; max-width: 640px; }
  .pied-actions { flex-direction: row-reverse; flex-shrink: 0; gap: 12px; }
  .pied-actions .bouton { width: auto; padding: 0 32px; }
  .pied-independance { font-size: 17px; }
  .pied-liens a { font-size: 16px; }
  .pied-awa { font-size: 15px; }
}

/* ── pages intérieures (construites sans maquette, dans le système du design) ── */
.page { padding-block: 28px 8px; max-width: 900px; margin-inline: 0; }
@media (min-width: 760px) { .page { padding-block: 48px 0; margin-inline: auto; max-width: 1440px; } .page > * { max-width: 760px; } }
.page h1 { font-size: 30px; font-weight: 600; letter-spacing: -.01em; line-height: 1.15; margin-bottom: 16px; }
.page h2 { font-size: 21px; font-weight: 600; line-height: 1.3; margin: 28px 0 8px; }
.page h3 { font-size: 18px; font-weight: 600; line-height: 1.35; margin: 22px 0 6px; }   /* PROD-01 : la rubrique Données personnelles */
.page p { font-size: 17px; line-height: 1.62; color: var(--texte-2); }
:lang(ar) .page p { line-height: 1.95; }
:lang(ar) .page h3 { line-height: 1.6; }
.page .donnees p + p { margin-top: 12px; }   /* PROD-01 : la rubrique se lit paragraphe par paragraphe */
:lang(ar) .page h1 { line-height: 1.5; }
@media (min-width: 760px) { .page h1 { font-size: 40px; } .page h2 { font-size: 24px; } .page p { font-size: 18px; } }
.bandeau-photo { height: 240px; overflow: hidden; background: var(--nuit); }
.bandeau-photo picture, .bandeau-photo img { width: 100%; height: 100%; }
.bandeau-photo img { object-fit: cover; }
@media (min-width: 760px) { .bandeau-photo { height: 360px; } }
.photo-manquante { width: 100%; height: 100%; background: #D8D3C8; }
.mot { font-size: 18px; }
.signature { margin-top: 16px; font-weight: 600; color: var(--encre); }
.page p.signature { color: var(--encre); }
.mentions { display: grid; gap: 4px 24px; margin-top: 8px; }
.mentions dt { font-weight: 600; font-size: 16px; margin-top: 14px; }
.mentions dd { font-size: 17px; line-height: 1.55; color: var(--texte-2); }
@media (min-width: 760px) { .mentions { grid-template-columns: minmax(180px, max-content) 1fr; } .mentions dt { margin-top: 0; } }
.intro { margin-bottom: 18px; }
.page .bouton { margin-block: 4px 8px; }

/* ── Nous écrire : formulaire, relecture ── */
.formulaire, .relecture { display: flex; flex-direction: column; gap: 22px; margin-top: 24px; max-width: 640px; }
.champ { display: flex; flex-direction: column; gap: 6px; }
.champ label, .relecture dt { font-size: 16px; font-weight: 600; }
.aide { font-size: 15px; line-height: 1.45; color: var(--texte-3); }
.page p.aide { font-size: 15px; color: var(--texte-3); }
input[type="text"], textarea, select {
  width: 100%; font: inherit; font-size: 18px; line-height: 1.4; color: var(--encre);
  background: #FFFFFF; border: 1.5px solid var(--trait); border-radius: 12px; padding: 12px 14px; min-height: 50px;
}
textarea { resize: vertical; min-height: 140px; }
select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--vert) 50%), linear-gradient(135deg, var(--vert) 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
[dir="rtl"] select { background-position: 16px 50%, 22px 50%; }
input:focus, textarea:focus, select:focus { outline: 3px solid var(--vert); outline-offset: 1px; border-color: var(--vert); }
.formulaire [aria-invalid="true"], .relecture [aria-invalid="true"] { border-color: var(--terra); }
.erreur { font-size: 16px; font-weight: 600; color: var(--terra); }
.page p.erreur { font-size: 16px; color: var(--terra); }
.dictee { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
#dictee-note { flex-basis: 100%; }
.dictee .bouton[aria-pressed="true"] { background: var(--vert); color: #FFFFFF; }
.formulaire > .bouton, .relecture-actions .bouton { align-self: stretch; }
@media (min-width: 760px) { .formulaire > .bouton { align-self: flex-start; } }
.relecture h2 { margin: 0; }
.relecture h2:focus { outline: none; }
.relu-meta { display: grid; gap: 2px 16px; grid-template-columns: max-content 1fr; }
.relu-meta div { display: contents; }
.relu-meta dd { font-size: 16px; }
.relecture-actions { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 760px) { .relecture-actions { flex-direction: row; } }
.apres-envoi { font-size: 17px; font-weight: 600; color: var(--vert); }
.page p.apres-envoi { color: var(--vert); }
[hidden] { display: none !important; }
/* Mentions en arabe : l'éditeur, le directeur et l'hébergeur restent en français (valeurs _commun) — lus
   de gauche à droite pour que la ponctuation ne se retourne pas, mais calés à droite comme la page. */
[dir="rtl"] .mentions dd:lang(fr) { direction: ltr; text-align: right; }

/* ── MR-DIF-01 : le bloc « Diffusez sur vos réseaux », avant le pied de chaque page (construit sans maquette,
   dans le système du design). Propriétés logiques : en arabe, l'image passe à droite et les boutons aussi. ── */
.diffusez { margin-top: 36px; padding-block: 26px 4px; border-top: 1px solid var(--sable); }
.diffusez + .pied { margin-top: 28px; }
.diffusez h2 { font-size: 21px; font-weight: 600; line-height: 1.3; }
.diffusez-sous { margin-top: 4px; font-size: 16px; line-height: 1.5; color: var(--texte-3); }
.proposition { margin-top: 16px; display: flex; flex-direction: column; gap: 14px; background: #FFFFFF; border-radius: 16px; padding: 14px; box-shadow: 0 2px 8px rgba(31,42,46,.07); max-width: 900px; }
.proposition img { width: 100%; height: auto; aspect-ratio: 1200 / 630; border-radius: 10px; background: var(--vert); } /* le vert de l'image : jamais un cadre blanc pendant le chargement */
.proposition figcaption { font-size: 18px; line-height: 1.5; font-weight: 600; color: var(--encre); text-wrap: pretty; }
:lang(ar) .proposition figcaption { line-height: 1.9; }
.diffusez-natif { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.diffusez-natif .bouton { width: 100%; }
.diffusez-reseaux { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.diffusez-copie { margin-top: 14px; max-width: 900px; }
.diffusez-copie summary { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--vert); }
.diffusez-complet { margin-block: 6px 10px; padding: 12px 14px; background: #FFFFFF; border: 1.5px solid var(--trait); border-radius: 12px; font-size: 16px; line-height: 1.5; user-select: all; }
.copie-etat { display: inline-flex; align-items: center; min-height: 44px; margin-inline-start: 12px; font-weight: 600; color: var(--vert); }
#diffusez-video { margin-top: 12px; }
@media (min-width: 760px) {
  .diffusez { margin-top: 64px; padding-block: 40px 0; }
  .diffusez + .pied { margin-top: 40px; }
  .diffusez h2 { font-size: 24px; }
  .proposition { flex-direction: row; align-items: center; gap: 24px; padding: 18px; }
  .proposition img { width: 320px; flex-shrink: 0; }
  .proposition figcaption { font-size: 20px; }
  .diffusez-natif { flex-direction: row; }
  .diffusez-natif .bouton { width: auto; }
}

/* ── MR-DIF-01 : la page « Devenir ambassadeur » ── */
.liste { margin: 0; padding-inline-start: 22px; display: flex; flex-direction: column; gap: 6px; }
.liste li { font-size: 17px; line-height: 1.55; color: var(--texte-2); }
:lang(ar) .liste li { line-height: 1.9; }
@media (min-width: 760px) { .liste li { font-size: 18px; } }
#mot-lien .formulaire { margin-top: 16px; gap: 14px; }
#mot { direction: ltr; }
[dir="rtl"] #mot { text-align: right; }
.lien-zone { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; max-width: 640px; }
.page p.lien-amb { padding: 12px 14px; background: #FFFFFF; border: 1.5px solid var(--vert); border-radius: 12px; font-size: 17px; color: var(--encre); user-select: all; }
[dir="rtl"] .page p.lien-amb { text-align: right; }
.ambassadeurs #devenir { margin-top: 28px; width: 100%; }
@media (min-width: 760px) { .ambassadeurs #devenir { width: auto; } }
.page p.pied-amb { margin-top: 6px; }

/* ── MR-PROPRE-01 : la porte « Je signale » ouverte (un vrai lien), à côté des deux portes fermées ── */
.porte-ouverte { display: block; text-decoration: none; color: var(--encre); border: 2px solid var(--vert); -webkit-tap-highlight-color: transparent; }
.porte-ouverte:hover { color: var(--encre); }
.porte-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 20px 8px; min-height: 64px; font-size: 21px; font-weight: 600; }
.porte-tete svg { width: 22px; height: 22px; flex-shrink: 0; }
[dir="rtl"] .porte-tete svg { transform: scaleX(-1); }
.porte-ouverte .porte-note span { display: block; }
.porte-ouverte .porte-note span + span { color: var(--vert); font-weight: 600; }
@media (min-width: 760px) {
  .porte-tete { padding: 32px 32px 10px; min-height: 96px; font-size: 28px; }
  .porte-tete svg { width: 26px; height: 26px; }
}

/* ── MR-PROPRE-01 : « Je signale », suivi, carte (construits sans maquette, dans le système du design) ── */
.aide-tete { margin-bottom: 18px; padding: 14px 16px; background: #FFFFFF; border-inline-start: 4px solid var(--ocre); border-radius: 8px; }
fieldset.champ { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.champ legend { padding: 0; margin-bottom: 6px; font-size: 16px; font-weight: 600; }
input[type="email"], input[type="password"] {
  width: 100%; font: inherit; font-size: 18px; line-height: 1.4; color: var(--encre);
  background: #FFFFFF; border: 1.5px solid var(--trait); border-radius: 12px; padding: 12px 14px; min-height: 50px;
}
input[type="file"] { font: inherit; font-size: 16px; min-height: 44px; max-width: 100%; }
input[type="file"]::file-selector-button { font: inherit; font-weight: 600; min-height: 44px; margin-inline-end: 12px; padding: 0 16px; border-radius: 12px; border: 1.5px solid var(--vert); background: #FFFFFF; color: var(--vert); cursor: pointer; }
#champ-lieu .bouton { align-self: flex-start; margin-bottom: 8px; }
.choix { display: flex; flex-direction: column; gap: 2px; }
.choix-ligne { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; cursor: pointer; }
.choix-ligne input { width: 22px; height: 22px; margin: 0; accent-color: var(--vert); flex-shrink: 0; }
.canal-valeur { margin-top: 8px; }
.vignettes { display: flex; flex-wrap: wrap; gap: 10px; }
.vignettes img { width: 96px; height: 96px; object-fit: cover; border-radius: 10px; background: var(--sable); }
.relecture > label { font-size: 16px; font-weight: 600; }
.refus { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #FFFFFF; border: 2px solid var(--terra); border-radius: 12px; }
.refus a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.retour-erreurs { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: #FFFFFF; border: 2px solid var(--terra); border-radius: 12px; }
.retour-erreurs a { font-weight: 600; }
.resultat { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; max-width: 640px; padding: 18px; background: #FFFFFF; border: 2px solid var(--vert); border-radius: 16px; }
.resultat h2 { margin: 0; font-size: 22px; line-height: 1.4; }
.resultat h2:focus { outline: none; }
.liens-propre { display: flex; flex-wrap: wrap; column-gap: 24px; margin-top: 28px; }
.page p.liens-propre a, .liens-propre a { display: inline-flex; align-items: center; min-height: 44px; font-size: 17px; font-weight: 600; }
.formulaire-suivi input { max-width: 260px; text-transform: uppercase; letter-spacing: .12em; }
.fiche-suivi { display: flex; flex-direction: column; gap: 10px; margin-top: 28px; padding: 18px; background: #FFFFFF; border-radius: 16px; box-shadow: 0 2px 8px rgba(31,42,46,.07); max-width: 760px; }
.fiche-suivi h2 { margin: 0; }
.page p.suivi-recu { font-size: 18px; font-weight: 600; color: var(--vert); }
.page p.suivi-statut { font-size: 20px; font-weight: 700; color: var(--encre); }
.suivi-dates { margin: 0; padding-inline-start: 20px; }
.suivi-dates li { font-size: 17px; line-height: 1.6; }
.suivi-photos { display: flex; flex-wrap: wrap; gap: 14px; }
.suivi-photo { flex: 1 1 220px; max-width: 360px; }
.suivi-photo img { width: 100%; height: auto; border-radius: 10px; background: var(--sable); }
.suivi-photo figcaption { margin-top: 4px; font-weight: 600; }
.bandeau-demo { padding: 10px 14px; background: var(--sable); border-inline-start: 4px solid var(--ocre); border-radius: 8px; font-weight: 600; color: var(--encre); }
.page p.bandeau-demo { color: var(--encre); font-size: 16px; }
/* PROD-01 §4 : l'accueil de la carte vide (aucun signalement en base) */
.carte-vide { margin: 8px 0 20px; padding: 18px 20px; background: var(--sable); border-inline-start: 4px solid var(--ocre); border-radius: 12px; }
.page .carte-vide h2 { margin-top: 0; color: var(--encre); }
.page .carte-vide p { color: var(--encre); }
.carte-vide .bouton { margin-top: 12px; }

/* la carte : le plan (fichier du dépôt) et, par-dessus, les points dans le MÊME viewBox ; jamais retournée en arabe */
.compteurs { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 760px; }
.compteurs li { padding: 12px 14px; background: #FFFFFF; border-radius: 12px; font-size: 16px; color: var(--texte-2); }
.compteurs strong { display: block; font-size: 26px; line-height: 1.2; color: var(--encre); }
@media (min-width: 760px) { .compteurs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan { margin-top: 18px; max-width: 900px; }
.plan-cadre { position: relative; border-radius: 12px; overflow: hidden; background: #EFEBE1; }
.plan-cadre img { width: 100%; height: auto; }
.plan-points { position: absolute; inset: 0; width: 100%; height: 100%; }
.plan-points text { font: 700 20px var(--latin); fill: #FFFFFF; text-anchor: middle; }
.plan figcaption { margin-top: 6px; font-size: 14px; color: var(--texte-3); }
/* LOT-PROD-02-B §2 : le crédit du fond servi, puis celui des rues — chacun sur SA ligne (une ligne par crédit au téléphone). */
.plan figcaption .credit-plan, .plan figcaption .credit-rues { display: block; }
/* LOT-PROD-02-B §1 : la phrase calme sous « Relire puis envoyer » — le ton de l'aide, jamais le rouge d'une erreur. */
.page p.manque { margin-top: 10px; font-size: 16px; color: var(--encre); }
.p-recu { fill: #A64B2A; stroke: #FFFFFF; stroke-width: 2; }
.p-doublon { fill: #5C6468; stroke: #FFFFFF; stroke-width: 2; }
.p-en_cours { fill: #7A5310; stroke: #FFFFFF; stroke-width: 2; }
.p-fait { fill: #2F5B50; stroke: #FFFFFF; stroke-width: 2; }
.p-refuse { fill: #1F2A2E; stroke: #FFFFFF; stroke-width: 2; }
.legende { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.legende li { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; font-size: 16px; }
.legende svg { display: inline-block; }
.table-defile { margin-top: 16px; max-width: 900px; overflow-x: auto; }
.liste-carte { width: 100%; border-collapse: collapse; font-size: 16px; overflow-wrap: normal; word-break: normal; }
/* regard du visiteur (22/09) : à 390 px le tableau coupait les mots arabes en plein milieu (« الم دة ») — les mots restent entiers, le tableau défile dans son cadre */
.liste-carte th, .liste-carte td { min-width: 4.5em; }
.liste-carte th, .liste-carte td { padding: 8px 10px; text-align: start; border-bottom: 1px solid var(--sable); vertical-align: top; }
.liste-carte th { font-weight: 700; background: #FFFFFF; }
.liste-carte td:first-child, .liste-carte th:first-child { width: 3em; }
[dir="rtl"] .liste-carte td[lang="fr"] { direction: ltr; text-align: right; }
.pastille { display: inline-block; width: 12px; height: 12px; margin-inline-end: 6px; vertical-align: middle; border-radius: 50%; }
.pastille.p-recu { background: #A64B2A; }
.pastille.p-doublon { background: #5C6468; }
.pastille.p-en_cours { border-radius: 0; background: #7A5310; }
.pastille.p-fait { border-radius: 0; background: #2F5B50; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pastille.p-refuse { border-radius: 0; background: #1F2A2E; transform: rotate(45deg) scale(.8); }

/* ── MR-PROPRE-01 : l'espace de validation (français seul) ── */
.onglets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.onglet { min-height: 44px; padding: 0 18px; font: inherit; font-weight: 600; border-radius: 12px; border: 1.5px solid var(--vert); background: #FFFFFF; color: var(--vert); cursor: pointer; }
.onglet[aria-selected="true"] { background: var(--vert); color: #FFFFFF; }
.page p.etat { min-height: 24px; margin-top: 10px; font-weight: 600; color: var(--vert); }
.v-carte { margin-top: 16px; padding: 16px; background: #FFFFFF; border-radius: 14px; border-inline-start: 5px solid var(--ocre); max-width: 900px; }
.v-carte.v-danger { border-inline-start-color: var(--terra); }
.v-carte h2, #v-fiche h2 { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; }
.v-demo { font-size: 14px; font-weight: 700; padding: 2px 8px; border-radius: 6px; background: var(--sable); color: var(--encre); }
.v-meta { display: grid; gap: 4px 16px; margin: 0; }
.v-ligne { display: contents; }
.v-meta dt { font-weight: 700; font-size: 15px; }
.v-meta dd { margin: 0 0 6px; font-size: 16px; }
@media (min-width: 760px) { .v-meta { grid-template-columns: minmax(170px, max-content) 1fr; } .v-meta dd { margin: 0; } }
.v-a-faire { font-style: italic; color: var(--terra); }
.marque-ia { display: inline-block; margin-inline-start: 6px; font-size: 13px; font-weight: 700; padding: 1px 7px; border-radius: 6px; background: #E8EEF6; color: var(--nuit); }
.v-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.v-photos img { width: 160px; height: 120px; object-fit: cover; border-radius: 8px; background: var(--sable); }
.v-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.v-choix { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; }
.v-choix .champ { min-width: 220px; }
.v-panneau { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; max-width: 760px; }
.v-panneau:empty { display: none; }
.v-historique { margin: 8px 0 0; padding-inline-start: 20px; font-size: 15px; line-height: 1.6; }
.v-outils { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-top: 14px; }
.v-appareils li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 6px; }
#v-fiche h3 { margin: 18px 0 6px; font-size: 18px; }

/* Regard du visiteur (22/09) : le champ fichier natif masqué À L'ŒIL seulement quand le JS le remplace par le bouton du site
   (label for=photo) ; il garde le focus clavier, et le contour passe sur le bouton qui le montre. */
.photo-cachee { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.bouton-photo { align-self: flex-start; }
.photo-cachee:focus-visible + .bouton-photo { outline: 3px solid var(--vert); outline-offset: 2px; }

/* MR-PROPRE-02 : la ligne d'attente de la photo (suivi) ; la priorité ramenée et le motif de l'IA (validation) */
.page p.suivi-photo-attente { padding: 10px 14px; background: var(--sable); border-radius: 8px; font-size: 16px; color: var(--encre); }
.marque-ramenee { background: #F6E7D8; color: #7A3A1E; }
.v-motif { font-style: italic; }
#position-note { margin-top: -2px; }
/* MR-PROPRE-02, regard du visiteur : après le doigt, « Utiliser ma position » restait peint en BLEU CLAIR (surbrillance tactile par
   défaut du navigateur), comme les portes au MR-V0-B. Retirée de tous les boutons et onglets ; le clavier garde son contour. */
.bouton, .onglet, .choix-ligne { -webkit-tap-highlight-color: transparent; }

/* ── MR-PROPRE-03 §1 : le plan du problème, dans « Je signale » ── */
.plan-position { margin: 12px 0; }
.question-position { font-weight: 600; font-size: 17px; margin: 0 0 8px; }
.choix-position { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 10px; }
.plan-placer { border-radius: 12px; overflow: hidden; background: #EFEBE1; border: 1px solid var(--trait); max-width: 560px; }
#plan-svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 897; }
#plan-svg.placer { touch-action: none; cursor: crosshair; }   /* le pouce déplace le point, la page ne défile pas */
#plan-svg:focus-visible { outline: 3px solid var(--ocre); outline-offset: -3px; }
.p-probleme { fill: #A64B2A; fill-opacity: .35; stroke: #A64B2A; stroke-width: 4; }
.p-coeur { fill: #A64B2A; stroke: #FFFFFF; stroke-width: 2; }
#canal-garde { margin-top: 8px; }

/* ── MR-PROPRE-03 §2 bis : la carte qui parle ── */
.plan-points .point { cursor: pointer; outline: none; }
.plan-points .point:focus-visible > :first-child, .plan-points .point.actif > :first-child { stroke: var(--ocre); stroke-width: 6; }
.plan-points .point.actif { transform-box: fill-box; transform-origin: center; transform: scale(1.25); }
.p-lien { stroke: #1F2A2E; stroke-width: 2; stroke-dasharray: 4 3; }
.p-lieu { fill: #1F2A2E; stroke: #FFFFFF; stroke-width: 2; }
.carte-aide { margin-top: 8px; }
.bulle { position: absolute; z-index: 3; width: 280px; max-width: calc(100% - 16px); padding: 12px 14px; border-radius: 10px;
  background: #FFFFFF; color: var(--encre); box-shadow: 0 6px 24px rgba(20, 33, 61, .22); font-size: 15px; line-height: 1.35; }
.bulle::after { content: ''; position: absolute; left: var(--fleche, 50%); bottom: -8px; width: 16px; height: 16px; margin-left: -8px;
  background: #FFFFFF; transform: rotate(45deg); }
.bulle.en-bas::after { bottom: auto; top: -8px; }
.fc-tete { margin: 0 0 6px; }
.fc-commune { display: block; font-size: .875rem; color: var(--texte-4); }   /* LOT-PROD-02 §6 : la commune sur sa ligne */
.fc-lignes { list-style: none; margin: 0; padding: 0; }
.fc-lignes li { margin: 2px 0; }
.fc-statut .pastille { margin-inline-end: 6px; }
.fc-photos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fc-photos figure { margin: 0; }
.fc-photos img { width: 160px; height: 120px; object-fit: cover; border-radius: 6px; display: block; }
.fc-photos figcaption { font-size: 14px; color: var(--trait); }
.fc-attente { margin: 8px 0 0; color: var(--trait); }
.fiche-courte { margin: 12px 0; padding: 14px 16px; border-radius: 12px; background: #FFFFFF; box-shadow: 0 2px 12px rgba(20, 33, 61, .12); }
.fiche-courte .bouton { margin-top: 10px; }
.lien-point { min-width: 44px; min-height: 44px; border: 0; background: none; font: inherit; font-weight: 700; color: var(--vert);
  text-decoration: underline; cursor: pointer; }
.liste-carte tr.actif { background: #FFF6E0; }
@media (prefers-reduced-motion: reduce) { .plan-points .point.actif { transform: none; } }

/* ── MR-VIS-01 : les photos qui défilent (accueil, À propos) ── */
.defile { position: absolute; inset: 0; overflow: hidden; }
.bandeau-photo { position: relative; }
.diapo { position: absolute; inset: 0; opacity: 0; transition: opacity 1.5s ease-in-out; }
.diapo.visible { opacity: 1; }
.diapo picture, .diapo img { display: block; width: 100%; height: 100%; }
.diapo img { object-fit: cover; }
/* le bouton : sous la photo, du côté de la fin de ligne (à droite ; à gauche en arabe), petit et secondaire */
.defile-bouton { display: block; width: fit-content; min-height: 44px; margin-block: 6px 0; margin-inline: auto var(--gouttiere);
  padding: 8px 14px; border: 1px solid var(--trait); border-radius: 999px; background: var(--pierre); color: var(--encre);
  font: 600 15px var(--latin); cursor: pointer; }
[dir="rtl"] .defile-bouton { font-family: var(--arabe); }
.defile-bouton:focus-visible { outline: 3px solid var(--ocre); outline-offset: 2px; }
.defile-bouton[hidden] { display: none; }
.hero:has(> .defile-bouton:not([hidden])) { overflow: visible; margin-block-end: 56px; }
.hero > .defile-bouton { position: absolute; top: 100%; inset-inline-end: 0; z-index: 2; }
@media (prefers-reduced-motion: reduce) { .diapo { transition: none; } }
.bulle.survol { pointer-events: none; }
.bulle.cote::after { display: none; }

/* ── MR-CARTE-01 : la vraie carte (Leaflet, public/fond-carte.js) sur /carte/ et dans « Je signale » ── */
.plan-cadre.avec-fond { aspect-ratio: 1000 / 897; max-height: 78vh; width: 100%; }
.carte-fond { position: absolute; inset: 0; z-index: 0; }   /* z-index 0 : les couches de Leaflet restent SOUS la bulle */
.plan-carte { width: 100%; aspect-ratio: 1000 / 897; max-height: 70vh; }
.plan-carte.placer { cursor: crosshair; }
.plan-carte:focus-visible, .carte-fond .leaflet-container:focus-visible { outline: 3px solid var(--ocre); outline-offset: -3px; }
.leaflet-container { font: inherit; background: #EFEBE1; }
/* l'attribution exigée (©TomTom, © OpenStreetMap) : lisible, en UNE ligne, jamais plus large que la carte */
.leaflet-container .leaflet-control-attribution { font-size: 12px; line-height: 1.4; white-space: nowrap; max-width: calc(100vw - 48px);
  overflow: hidden; text-overflow: ellipsis; background: rgba(255, 255, 255, .85); color: #1F2A2E; }
.leaflet-container .leaflet-control-attribution a { color: #1F2A2E; }
.fond-nom { margin: 6px 0 0; font-size: 14px; color: var(--texte-3); }
.position-rue { margin: 8px 0 0; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.position-hors { margin: 6px 0 0; }   /* une aide, jamais du rouge : le geste n'est pas une faute */
.point-carte { cursor: pointer; background: none; border: 0; }
.point-carte svg { display: block; overflow: visible; }
.point-carte text { font: 700 20px var(--latin); fill: #FFFFFF; text-anchor: middle; pointer-events: none; }
.point-carte:focus { outline: none; }
.point-carte:focus-visible svg > :first-child, .point-carte.actif svg > :first-child { stroke: var(--ocre); stroke-width: 6; }
.point-carte.actif svg { transform: scale(1.25); transform-origin: center; }
@media (prefers-reduced-motion: reduce) { .point-carte.actif svg { transform: none; } }
path.p-lien { stroke: #1F2A2E; stroke-width: 2; stroke-dasharray: 4 3; fill: none; }
path.p-lieu { fill: #1F2A2E; fill-opacity: 1; stroke: #FFFFFF; stroke-width: 2; }
.point-probleme { background: none; border: 0; }
.point-probleme .pp-halo { position: absolute; inset: 0; border-radius: 50%; background: rgba(166, 75, 42, .35); border: 4px solid #A64B2A; }
.point-probleme .pp-coeur { position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #A64B2A; border: 2px solid #FFFFFF; box-sizing: content-box; }
.bulle { z-index: 1000; }