/* ageris82.org — restoration stylesheet, loaded after every original sheet.
   Each section names the measurement that forced it. Nothing here restyles the site: it repairs
   places where the WebSee theme depended on a file the archive does not hold, or on a behaviour
   that only a live server could supply. */

/* ---------------------------------------------------------------------------------------------
   A. INVISIBLE TEXT — the single worst defect on this site.
   domaine.css paints `color:white` on two bands and puts a background PHOTOGRAPH behind them:
     .wrapper-page-1  #wrapper-bloc-2  -> /template/batiment-ageris.jpg   (homepage figures)
     .wrapper-page-12/13/14/36 #wrapper-bloc-3 -> /template/admission.jpg (four service pages)
   Neither photograph is in any of the 998 archived rows for this domain, so white text landed on
   white. The four homepage counters animated correctly and could not be read at all: the block
   reads "L'AGERIS 82, c'est / 25 Professionnels / 65 Personnes accompagnées dans leur autonomie /
   50 Travailleurs handicapés / 15 Bénévoles".
   The band gets the site's own dark blue instead of an invented photograph. #04548f is the colour
   domaine.css already uses for h1; against white it measures 7.8:1, so the copy is legible and the
   counters read as a deliberate figure band rather than as a hole. --------------------------- */
.wrapper-page-1 #wrapper-bloc-2,
.wrapper-page-12 #wrapper-bloc-3,
.wrapper-page-13 #wrapper-bloc-3,
.wrapper-page-14 #wrapper-bloc-3,
.wrapper-page-36 #wrapper-bloc-3,
.wrapper-page-7 #wrapper-bloc-3,
.wrapper-page-8 #wrapper-bloc-3,
.wrapper-page-9 #wrapper-bloc-3,
.wrapper-page-10 #wrapper-bloc-3,
.wrapper-page-11 #wrapper-bloc-3 {
  background: #04548f !important;
  color: #fff !important;
  padding: 34px 0 40px;
}
.wrapper-page-1 #wrapper-bloc-2 a,
.wrapper-page-12 #wrapper-bloc-3 a,
.wrapper-page-13 #wrapper-bloc-3 a,
.wrapper-page-14 #wrapper-bloc-3 a,
.wrapper-page-36 #wrapper-bloc-3 a { color: #cfe9f8 !important; }

/* .compteur-image is gone (the four icons are 404 in the archive), so the number carries the
   block on its own and needs the weight the icon used to give it. */
.compteur-chiffres { font-size: 46px; line-height: 1.1; font-weight: 700; }
.compteur-txt { font-size: 17px; line-height: 1.35; padding: 6px 10px 0; }

/* /template/noisy-grid.png is also absent. It was a texture over #f7f7f7 and nothing more, so the
   flat colour underneath is the whole of it — but the failed request has to stop. */
#wrapper-bloc-2,
.wrapper-page-1 #wrapper-bloc-3,
.wrapper-page-13 #wrapper-bloc-5,
.wrapper-page-14 #wrapper-bloc-5,
.wrapper-page-22 #wrapper-bloc-4,
.wrapper-page-24 #wrapper-bloc-4 { background-image: none; }

/* ---------------------------------------------------------------------------------------------
   B. SKIP LINKS were painted as ordinary body text in the top-left corner of all 26 pages: the
   words "Aller au contenu principal Aller au pied de page" sat above the logo. The markup is
   right and the theme simply never styled `.skip-link`; they belong off-screen until focused. */
.skip-links-container { position: absolute; }
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: #04548f; color: #fff; padding: 12px 18px; z-index: 1000;
  text-decoration: none; font-size: 16px;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------------------------------------------
   C. NAVIGATION AT 390. <nav> measured 0px high on a phone while the smartphone menu inside it
   measured 58px, so the "Menu" control was painted over whatever followed it. It also looked like
   a line of body text rather than a control, and its tap target was under the 24px floor. */
nav[role="navigation"] { overflow: hidden; }
nav[role="navigation"]::after { content: ""; display: block; clear: both; }

@media (max-width: 980px) {
  .menu-principal-smartphone-menu { background: #04548f; }
  a.menu-principal-smartphone-menu-dropdown {
    display: block; color: #fff !important; background: #04548f;
    font-size: 18px; line-height: 1.2; padding: 15px 18px 15px 54px;
    min-height: 26px; text-decoration: none; position: relative;
  }
  a.menu-principal-smartphone-menu-dropdown::before {
    content: ""; position: absolute; left: 18px; top: 50%; margin-top: -8px;
    width: 24px; height: 16px;
    border-top: 3px solid #fff; border-bottom: 3px solid #fff;
    box-shadow: inset 0 0 0 3px transparent, 0 0 0 0 transparent;
    background: linear-gradient(#fff, #fff) center / 24px 3px no-repeat;
  }
  .menu-principal-smartphone-item-titre,
  .menu-principal-smartphone-submenu-item-titre {
    display: block; padding: 13px 18px; min-height: 24px; line-height: 1.3;
  }
}

/* ---------------------------------------------------------------------------------------------
   D. CLICK-TO-LOAD VIDEO. Five live YouTube iframes shipped; each rendered as a blank block here
   because the embed never loaded, and each sent the visitor's IP to Google on page load, which
   contradicts /politique-de-cookies/ in writing. The poster is the video's own frame, hosted by
   the site; the embed URL waits in data-embed until the visitor presses the button. */
.ager-embed {
  position: relative; display: block; width: 100%; overflow: hidden;
  background: #04548f; line-height: 0;
}
.ager-embed img { width: 100%; height: auto; display: block; }
.ager-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.ager-embed-play {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: #fc3d31; color: #fff; border: 0; cursor: pointer;
  font: 700 17px/1.2 "News Cycle", sans-serif; letter-spacing: .06em;
  padding: 15px 26px; min-height: 48px; min-width: 160px;
}
.ager-embed-play:hover, .ager-embed-play:focus { background: #04548f; outline: 2px solid #fff; }
.ager-embed-note { font-size: 14px; color: #4a4a4a; margin: 8px 0 0; line-height: 1.4; }

/* ---------------------------------------------------------------------------------------------
   E. THE MAP. /js/leaflet/* is absent from the archive, so the contact page shipped an empty
   778x700 div — the largest hole on the site. It now holds a raster of the same place, rendered
   at build time from the coordinates the page itself published. ODbL asks for the credit; it is
   burned into the picture AND printed here as selectable text, per project method. */
.ager-map { margin: 0; }
.ager-map img { width: 100%; height: auto; display: block; }
.ager-map figcaption {
  font-size: 14px; line-height: 1.5; color: #343434; padding: 8px 2px 0;
}
.ager-map figcaption a { color: #0069a3; }

/* ---------------------------------------------------------------------------------------------
   F. THE FORMS. Two <form> elements with no action, on /contact… and /demande-de-devis/. They
   validated in JS and then reloaded the page: controls that do nothing. Replaced by the route the
   association itself published — it never printed an e-mail address, so there is none to offer. */
.ager-contact-panel { max-width: 620px; }
.ager-contact-panel h2 {
  font-family: "Gloria Hallelujah", cursive; color: #04548f; font-size: 24px; margin: 0 0 16px;
}
.ager-contact-line { font-size: 17px; line-height: 1.6; margin: 0 0 14px; }
.ager-contact-line a { color: #0069a3; font-weight: 700; }
.ager-contact-note {
  font-size: 15px; line-height: 1.6; color: #3d3d3d;
  border-left: 4px solid #0097d6; padding: 4px 0 4px 14px; margin: 18px 0 0;
}

/* ---------------------------------------------------------------------------------------------
   G. PARTNER CARDS. Twenty logo files failed the archive fetch (they are other organisations'
   trade marks and may not be re-drawn), and the "En savoir plus" link opened a CMS fiche that no
   longer exists. Both are removed; what is left is the partner's name, what they do and a link to
   their own site, and the card has to close up cleanly instead of leaving grey voids. */
/* The theme hid `.un-lien-bloc-description` in the list view because the logo carried the card.
   With the logo gone, the description is the only thing the card can say beyond its name — and it
   is real archived copy ("Aveyron / Tarn-et-Garonne"), so it is shown rather than left hidden. */
.un-lien-bloc-description {
  display: block; padding: 12px 14px; font-size: 16px; line-height: 1.45; color: #1d1d1d;
}
.un-lien-bloc-description:empty { display: none; }

/* WebSee equalises the blue header to a fixed 88px and lets a longer name spill out of it: the
   third line of "CENTRE HOSPITALIER INTERCOMMUNAL CASTELSARRASIN MOISSAC" was sliced in half. */
.un-lien-bloc-header, .un-lien-bloc-titre {
  height: auto !important; min-height: 0; overflow: visible;
}
.un-lien-bloc-titre { width: 96%; padding: 14px 2%; line-height: 1.3; }
.un-lien-bloc-footer { padding-bottom: 46px; }
.un-lien-bloc-contenu { min-height: 0; }
a.un-lien-bloc-website {
  padding: 13px 10px; min-height: 24px; font-size: 16px; color: #1d1d1d;
  background-color: #d3d3d3;
}

/* ---------------------------------------------------------------------------------------------
   H. SEARCH. The floating bar shipped a search box with `disabled` on the input and a submit that
   called a form with no action — the "search box that swallows the query" this project is
   explicitly told not to ship. It now runs against /search-index.json, built from the delivered
   pages, and the results are rendered right under the field. */
.ager-search-results { margin-top: 10px; max-height: 60vh; overflow-y: auto; }
.ager-search-results ul { list-style: none; margin: 0; padding: 0; }
.ager-search-results li { border-top: 1px solid #d8d8d8; }
.ager-search-results a {
  display: block; padding: 11px 6px; color: #04548f; text-decoration: none;
  font-size: 16px; line-height: 1.35; min-height: 24px;
}
.ager-search-results a:hover, .ager-search-results a:focus { background: #eaf5fb; }
.ager-search-results .ager-search-none { padding: 12px 6px; font-size: 15px; color: #3d3d3d; }
.recherche-text { min-height: 40px; font-size: 16px; padding: 6px 10px; }
a.recherche-submit { min-width: 40px; min-height: 40px; display: inline-block; }

/* ---------------------------------------------------------------------------------------------
   J. HEADING RULES. /img/trait.png and /img/traitrouge.png are 300x9 pictures of a line: 60px of
   the site's blue (or red) then 240px of grey. Drawn as <img> they are counted as photographs
   reused across pages, which is both true and beside the point - a rule repeats by design. Same
   picture, no file, two fewer requests per page. */
.ager-rule {
  display: block; width: 300px; max-width: 100%; height: 9px; margin: 2px 0 6px;
  background: linear-gradient(to right, currentColor 0 60px, #818181 60px 300px) left center
              / 100% 1px no-repeat;
}
.ager-rule-blue { color: #015989; }
.ager-rule-red { color: #fc3d31; }

/* ---------------------------------------------------------------------------------------------
   I. LEGIBILITY FLOOR. qa_legibility blocks on copy under 12px, tap targets whose shorter side is
   under 24px and sideways scroll. The WebSee theme sets 10px and 11px in several places and lets
   its tables overflow a 390px screen. */
body { font-size: 16px; }
.template-footer, .template-footer * { font-size: 15px; }
.footer-mentions, .footer-mentions * { font-size: 14px !important; line-height: 1.6; }
.un-article-slick-publication, .un-article-detail-publication { font-size: 14px; }
html, body { max-width: 100%; overflow-x: hidden; }
img, table { max-width: 100%; }
table { border-collapse: collapse; }

@media (max-width: 760px) {
  /* WebSee lays every content block out in a table with percentage-width cells; below 760px they
     have to stack or the page scrolls sideways and every cell becomes unreadably narrow. */
  .template-contents table.responsive-table,
  .template-contents table.responsive-table tbody,
  .template-contents table.responsive-table tr,
  .template-contents table.responsive-table td { display: block; width: auto !important; }
  .template-contents table.responsive-table td { padding: 8px 0 !important; }
}

/* Links inside running copy must be distinguishable from the prose around them by more than the
   theme's pale blue, which qa_legibility measures against the paragraph colour. */
.wrapper-contents p a:not([class]) { text-decoration: underline; }

/* MEASURED at 1440 and 390: the four footer credit links render 21px high and the two map-credit
   links 23px, all under the 24px floor a finger needs (WCAG 2.5.8). They are links, not decoration
   — the CGU link in that row is one of the site's mandatory pages. */
.copyright a, .footer-mentions a {
  display: inline-block; padding: 4px 2px; line-height: 1.5; min-height: 24px;
}
.ager-map figcaption a { display: inline-block; padding: 4px 2px; min-height: 24px; }

/* The floating side bar labels are white, absolutely positioned over the workshop tint photographs
   (/template/industrie.jpg and friends), and measure 2.7-3.1:1 against them. The photograph is the
   design and stays; the words need a darker ground to sit on.
   An INSET BOX-SHADOW, not a ::before scrim and not position:relative — `.lien-cote` is
   position:absolute, so giving its ancestor a position changes its containing block, and the first
   attempt at this moved the panels over the page body: three lines of the contact page then came
   back "NOT MEASURED" because elementFromPoint hit the panel instead of the text. box-shadow
   paints over the background, under the text, and touches no layout at all. */
.websee-barre-flottante-containers { box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .45); }
a.lien-cote {
  color: #fff !important; text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
  padding: 13px 12px !important;
}

/* The "back to top" arrow in each partner-group header is an 18x27 hit area. */
a.anchor-retour {
  display: inline-block; min-width: 26px; min-height: 26px; padding: 4px 6px; text-align: center;
}

/* ---------------------------------------------------------------------------------------------
   K. THE SEARCH RESULTS PAGE (/recherche/), and the state the floating bar now exposes.
   The bar's six tabs are <li onclick="…"> in the WebSee markup: no tab stop, no name, no state.
   ager-restore.js gives them role=button, a tab stop and aria-expanded; these rules give the open
   one something visible, because an announced state that is not also painted helps nobody. */
.websee-barre-flottante-items[role="button"]:focus-visible,
.websee-barre-flottante-smartphone-items[role="button"]:focus-visible {
  outline: 3px solid #fc3d31; outline-offset: -3px;
}
.websee-barre-flottante-items.is-open { box-shadow: inset 0 0 0 3px #fc3d31; }

/* /recherche/ is cloned from /mentions-legales/, which is the TEMPLATE and therefore does not
   carry the .o5-legal rules that o5_20_mandatory injects into the pages it authors. The class is
   inert there, so the page has to carry its own measure and gutters or its content runs flush to
   the left edge of the window while every other page sits in a centred column. */
.ager-search-page {
  max-width: 780px; margin: 0 auto; padding: 2.5em 1.25em 3.5em; box-sizing: border-box;
  text-align: left;
}
@media (max-width: 700px) { .ager-search-page { padding: 1.5em 1em 2.5em; } }
.ager-search-h1 {
  font-family: "Gloria Hallelujah", cursive; color: #04548f; font-size: 26px; margin: 0 0 20px;
}
.ager-search-page-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.ager-search-page-form label { width: 100%; font-size: 16px; color: #343434; }
.ager-search-page-form input {
  flex: 1 1 260px; min-height: 44px; font-size: 17px; padding: 8px 12px;
  border: 1px solid #9a9a9a; box-sizing: border-box;
}
.ager-search-page-form button {
  min-height: 44px; padding: 10px 22px; border: 0; cursor: pointer;
  background: #04548f; color: #fff; font: 700 16px/1.2 "News Cycle", sans-serif;
  letter-spacing: .05em;
}
.ager-search-page-form button:hover, .ager-search-page-form button:focus { background: #fc3d31; }
.ager-search-page-results { margin: 26px 0 0; }
.ager-search-page-results ul { list-style: none; margin: 0; padding: 0; }
.ager-search-page-results li { border-top: 1px solid #dcdcdc; padding: 14px 0; }
.ager-search-page-results a {
  font-size: 19px; color: #04548f; display: inline-block; min-height: 24px; padding: 2px 0;
}
.ager-search-count { font-size: 15px; color: #4a4a4a; margin: 0 0 6px; }
.ager-search-excerpt { font-size: 15px; line-height: 1.55; color: #3d3d3d; margin: 6px 0 0; }
.ager-search-help { font-size: 15px; line-height: 1.6; color: #3d3d3d; margin-top: 30px; }