/* ============================================================
   AT225 — Portail · feuille de style générale
   Conception TÉLÉPHONE D'ABORD : les règles de base valent pour
   le mobile, les écrans larges sont traités en bas du fichier.
   ⚠ boutique.php possède son propre bloc <style> (préfixe bp-).
     Les ajustements téléphone de la boutique sont ici, écrits
     avec « main » devant pour passer devant ce bloc interne.
   ============================================================ */

:root{
  --vert:#00A550; --vert-fonce:#00803e; --vert-nuit:#1b4332;
  --orange:#E9611F;
  --noir:#1A1A1A; --gris:#6b7280; --fond:#f5f6f8; --bordure:#e5e7eb;
  /* Fond des blocs « blancs » : barre, cartes, champs, tuiles. Passe en
     variable le 28/08 pour que le mode sombre puisse le changer d'un coup.
     En clair il vaut #fff : l'apparence ne bouge donc pas d'un pixel. */
  --surface:#fff;

  /* COULEURS DES ETATS (31/08). Un bandeau d'avertissement, une pastille
     « publiee », un encadre d'erreur : partout dans le portail ils etaient
     ecrits en dur, rose pale sur texte rouge sombre. En mode sombre la carte
     devenait sombre autour, mais la pastille restait rose - illisible, ou au
     mieux hors sujet.

     Six familles ; pour chacune un fond, une bordure, un texte. En mode
     clair ce sont exactement les teintes d'avant. En sombre elles reprennent
     celles des cartes de l'accueil, pour que les deux se ressemblent.

       r  rouge  erreur, refus        o  orange  attention, en cours
       v  vert   succes, actif        b  bleu    information, nouveau
       p  violet rappel               g  gris froid  neutre, deja lu    */
  --al-r-fond:#fdecea; --al-r-bord:#f3c8c3; --al-r-texte:#b3261e;
  --al-o-fond:#fff4e5; --al-o-bord:#f0dcb8; --al-o-texte:#8a4b00;
  --al-v-fond:#e6f6ed; --al-v-bord:#c3e3d1; --al-v-texte:#0b6b3a;
  --al-b-fond:#eef4fc; --al-b-bord:#cfe0f5; --al-b-texte:#1a56a8;
  --al-p-fond:#eee9f7; --al-p-bord:#d6c9ee; --al-p-texte:#5b3fa8;
  --al-g-fond:#eef2f7; --al-g-bord:#dbe3ec; --al-g-texte:#41597a;
}

/* ---------------------------------------------------------------------------
   MODE SOMBRE DE L'ESPACE CONNECTE (28/08)

   Le site public avait deja son mode sombre ; l'espace connecte, non. Une
   personne qui basculait en sombre sur l'accueil public retrouvait un portail
   tout blanc en se connectant.

   La bascule est la MEME pour les deux : meme bouton, meme memoire
   (localStorage « pa-theme »), meme classe « pa-sombre » sur le body. Les
   couleurs ci-dessous sont celles du site public, pour que le passage de l'un
   a l'autre ne se voie pas.

   Tout tient en une redefinition de variables : les regles plus bas s'y
   adaptent seules. Le PIED DE PAGE n'est pas touche - il est vert nuit dans
   les deux modes, c'est voulu.
   --------------------------------------------------------------------------- */
body.pa-sombre{
  --fond:#0e1d15;
  --surface:#16281f;
  --noir:#eef3ef;
  --gris:#a9bcb1;
  --bordure:#254234;

  /* Les memes six familles, version nuit : fonds tres sombres mais teintes,
     bordures visibles, textes pales. Le contraste tient dans les deux sens. */
  --al-r-fond:#2c1614; --al-r-bord:#6b2b25; --al-r-texte:#f2b8b2;
  --al-o-fond:#2a1d13; --al-o-bord:#5c4326; --al-o-texte:#f0d9a8;
  --al-v-fond:#12241a; --al-v-bord:#265135; --al-v-texte:#9ae6b4;
  --al-b-fond:#131f2c; --al-b-bord:#274565; --al-b-texte:#a8c8f0;
  --al-p-fond:#201a2b; --al-p-bord:#443463; --al-p-texte:#cbb8f0;
  --al-g-fond:#1a2430; --al-g-bord:#33475e; --al-g-texte:#b8c6d6;
}

*{box-sizing:border-box}

body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
     background:var(--fond);color:var(--noir);margin:0;min-height:100vh;
     display:flex;flex-direction:column;
     -webkit-text-size-adjust:100%}

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

a{color:var(--vert);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Barre du haut ---------- */
.barre{background:var(--surface,#fff);border-bottom:1px solid var(--bordure);padding:10px 14px;
     display:flex;justify-content:space-between;align-items:center;gap:12px;
     flex-wrap:wrap;position:sticky;top:0;z-index:100}
.barre img{height:32px;display:block}
.barre-droite{display:flex;align-items:center;gap:12px;font-size:14px;flex-wrap:wrap}
.barre-droite .qui{color:var(--gris)}
.barre-droite .qui strong{color:var(--noir)}

/* Bouton clair/sombre (28/08), cale sur la taille des boutons de langue.
   min-height:0 est indispensable : la regle input,select,textarea plus haut
   impose 46px a tout champ, et l'emporterait sur un simple bouton. */
.ht-theme{background:var(--surface,#fff);border:1px solid var(--bordure);
     border-radius:6px;padding:5px 9px;font-size:15px;line-height:1;
     cursor:pointer;min-height:0;width:auto;color:inherit}
.ht-theme:hover{border-color:var(--vert)}

.langues{display:flex;gap:4px}
.langues a{font-size:12px;font-weight:700;color:var(--gris);padding:6px 10px;
     border:1px solid var(--bordure);border-radius:6px;text-decoration:none}
.langues a.actuelle{background:var(--vert);color:#fff;border-color:var(--vert)}

/* ---------- Corps ---------- */
main{flex:1;width:100%;max-width:1000px;margin:16px auto;padding:0 14px}

/* ---------- Cartes et titres ---------- */
.carte{background:var(--surface,#fff);padding:18px;border-radius:14px;margin-bottom:18px;
       border:1px solid var(--bordure)}
h1{font-size:23px;line-height:1.25;margin:0 0 10px}
h2{font-size:17px;line-height:1.3;margin:0 0 14px}

.badge{display:inline-block;background:#e6f6ed;color:var(--vert-fonce);
       padding:5px 14px;border-radius:20px;font-size:13px;font-weight:600}

/* ---------- Formulaires ----------
   textarea était ABSENT de cette règle : il gardait sa largeur d'usine
   et le bouton se plaçait à côté (constaté sur suggestions.php). */
label{display:block;font-size:14px;margin-bottom:6px;font-weight:500}
input,select,textarea{padding:12px;border:1px solid #ccc;border-radius:8px;
     font-size:16px;font-family:inherit;width:100%;min-height:46px;
     display:block;background:var(--surface,#fff);color:var(--noir)}
/* Un champ caché doit le rester : sans cette ligne, la règle ci-dessus
   le rendrait visible sous forme de case vide. */
input[type=hidden]{display:none}
textarea{min-height:130px;resize:vertical;line-height:1.5}
input:focus,select:focus,textarea:focus{outline:2px solid var(--vert);
     border-color:var(--vert)}

button{padding:13px 20px;border:0;border-radius:8px;background:var(--vert);
     color:#fff;font-size:15px;font-family:inherit;font-weight:600;cursor:pointer;
     min-height:46px}
button:hover{background:var(--vert-fonce)}
button.gris{background:var(--gris)}
button.orange{background:var(--orange)}
button:disabled{background:#ccc;cursor:not-allowed}

/* ---------- Tableaux ----------
   Sur téléphone le tableau défile au doigt. Ajouter la classe
   « enroule » sur une cellule pour l'autoriser à revenir à la ligne. */
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px;border-bottom:1px solid var(--bordure);
      vertical-align:top}
th{color:var(--gris);font-weight:600}
td.enroule,th.enroule{white-space:normal;min-width:190px}

/* ---------- Messages ---------- */
.ok{background:#e6f6ed;color:var(--vert-fonce);padding:12px;border-radius:8px;
    margin-bottom:16px;font-size:14px}
.ko{background:#fdecea;color:#b3261e;padding:12px;border-radius:8px;
    margin-bottom:16px;font-size:14px}

/* ---------- Grille de cartes (accueil) ---------- */
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
        gap:12px}
.outil{background:var(--surface,#fff);padding:16px;border-radius:14px;border:1px solid var(--bordure);
       color:inherit;border-left:4px solid var(--vert);
       display:flex;gap:13px;align-items:flex-start}
.outil:hover{border-color:var(--vert);text-decoration:none;
             box-shadow:0 4px 14px rgba(0,0,0,.08)}
.outil strong{display:block;font-size:16px;margin-bottom:4px;color:var(--noir)}
.outil span{font-size:13px;color:var(--gris);line-height:1.45}
.outil svg{width:26px;height:26px;stroke:var(--vert);fill:none;stroke-width:1.7;
           stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;margin-top:2px}

/* ============================================================
   PIED DE PAGE — classes réelles de inc/bas.php
   ============================================================ */
/* Les regles du pied de page vivent dans inc/bas.php depuis le 08/09 : le
   pied s'affiche aussi sur les pages qui ne chargent pas cette feuille
   (offres d'emploi, temoignages, recensement, tirage special). */

/* ============================================================
   TÉLÉPHONE
   ============================================================ */
@media(max-width:700px){

  /* Tableaux défilants */
  table{display:block;overflow-x:auto;white-space:nowrap;
        -webkit-overflow-scrolling:touch}

  /* --- Boutique : le premier article doit être visible tout de suite --- */

  /* Le logo est déjà dans la barre du haut : inutile de le répéter en grand. */
  main .bp-entete img{display:none}
  main .bp-entete{padding:12px 12px 4px}
  main .bp-entete p{font-size:14px}

  /* Filtres sur deux colonnes au lieu de cinq lignes empilées */
  main .bp-filtres{display:grid;grid-template-columns:1fr 1fr;gap:10px;
       align-items:end;padding:12px}
  main .bp-filtres > div:first-of-type{grid-column:1 / -1}
  main .bp-filtres input,main .bp-filtres select{width:100%;font-size:16px}

  /* Deux articles par ligne */
  main .bp-grille{grid-template-columns:1fr 1fr;gap:10px}
  main .bp-photo{height:150px;padding:6px}
  main .bp-corps{padding:10px;gap:5px}
  main .bp-nom{font-size:14px}
  main .bp-prix{font-size:16px}
  main .bp-cat{font-size:10px}
  main .bp-voir{font-size:12px}
}

/* ============================================================
   ÉCRANS LARGES
   ============================================================ */
@media(min-width:768px){
  .barre{padding:12px 24px;gap:16px}
  .barre img{height:38px}
  main{margin:28px auto;padding:0 16px}
  .carte{padding:24px;margin-bottom:24px}
  h1{font-size:26px}
  .grille{gap:16px}
  .outil{padding:20px}
  input,select,textarea{font-size:15px}
}