/* Feuille partagee par les ecrans de l espace prive. Memes jetons que la vitrine. */
:root{--accent:#E94E22;--accent-fonce:#C23E18;--fond:#FFFBF7;--fond-doux:#F7EDE4;
      --encre:#2B211C;--texte-2:#4A3D35;--texte-sombre-2:#CDBFB5;--accent-doux:#F2A38C;
      --label:#8A776A;--bord:#E7DAD0;
      --serif:'Cutive',Georgia,serif;--sans:'Karla',-apple-system,'Segoe UI',Arial,sans-serif}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--encre);background:var(--fond)}
h1,h2{font-family:var(--serif);font-weight:400;text-wrap:pretty}
h1{font-size:clamp(30px,4vw,44px);line-height:1.15}
h2{font-size:clamp(22px,2.6vw,30px);line-height:1.25}
a{color:inherit}
.eyebrow{font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--accent)}
header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;
       padding:18px 6vw;background:var(--fond);border-bottom:1px solid var(--bord)}
.marque{display:flex;align-items:center;gap:11px;text-decoration:none}
/* 🔴 Le logo du Phare n est PAS carré (608×529). Sans width:auto, la
   largeur fixe l aplatit — c est exactement ce qui était arrivé au logo
   du Phare sur les supports imprimés. On fixe la HAUTEUR, jamais les deux. */
/* 🔴 Le verrouillage officiel n est PAS carré (753×200). On fixe la
   HAUTEUR et on laisse la largeur suivre : imposer les deux l aplatirait,
   exactement comme le logo écrasé des supports imprimés. */
.logo{height:38px;width:auto;flex:none;display:block}
.mot{font-family:var(--serif);font-size:26px;color:var(--accent);line-height:1}
.qui{font-size:14px;color:var(--label)}
main{padding:6vh 6vw 10vh;max-width:1100px;margin:0 auto}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;border-radius:999px;
     padding:13px 28px;font-weight:700;text-decoration:none;border:2px solid transparent;cursor:pointer;
     font-family:inherit;font-size:16px;transition:background .15s ease,color .15s ease}
.btn-plein{background:var(--accent);color:var(--fond);border-color:var(--accent)}
.btn-plein:hover{background:var(--accent-fonce);border-color:var(--accent-fonce)}
.btn-ligne{border-color:var(--encre);color:var(--encre)}
.btn-ligne:hover{background:var(--encre);color:var(--fond)}
.avert{background:#2B211C;color:#FFFBF7;padding:14px 6vw;font-size:15px;text-align:center;line-height:1.5}
.avert b{color:var(--accent-doux)}
.carte{background:var(--fond);border:1px solid var(--bord);border-radius:20px;padding:26px}
.grille{display:grid;gap:20px}
table{width:100%;border-collapse:collapse;margin-top:22px;font-size:16px}
th{text-align:left;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
   color:var(--label);padding:0 14px 10px;border-bottom:1px solid var(--bord)}
td{padding:15px 14px;border-bottom:1px solid var(--bord);vertical-align:middle}
tr:hover td{background:#FDF7F2}
.puce{display:inline-block;font-size:13px;font-weight:700;border-radius:999px;padding:4px 12px}
.p-ok{background:#e3f0e6;color:#2c6b39}.p-att{background:#fdecd9;color:#9a5b12}
.champ{display:block;margin-bottom:18px}
.champ span{display:block;font-size:14px;font-weight:700;color:var(--texte-2);margin-bottom:6px}
.champ input,.champ select{width:100%;font-family:inherit;font-size:16px;padding:13px 15px;
     border:1px solid var(--bord);border-radius:12px;background:#fff}
.depot{border:2px dashed #ddc9ba;border-radius:20px;padding:38px 24px;text-align:center;
       background:var(--fond-doux);color:var(--texte-2)}
footer{background:var(--encre);color:var(--texte-sombre-2);padding:5vh 6vw;text-align:center;font-size:14px}
footer a{color:var(--accent-doux)}

/* ── Responsive ─────────────────────────────────────────────────────────────
   🔴 Un tableau ne se reduit pas : sous 720 px, chaque ligne devient une carte
   et l en-tete de colonne est repris par l attribut data-l de la cellule.
   Sans cela le tableau deborde de l ecran ou devient illisible.            */
.tableau{overflow-x:auto}
@media (max-width:720px){
  header{padding:14px 5vw}
  main{padding:5vh 5vw 8vh}
  .tableau{overflow:visible}
  table,thead,tbody,tr,td{display:block;width:100%}
  thead{position:absolute;left:-9999px}
  tr{background:var(--fond);border:1px solid var(--bord);border-radius:16px;
     padding:6px 4px;margin-bottom:14px}
  tr:hover td{background:transparent}
  td{border:0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;
     padding:9px 14px;text-align:right}
  td::before{content:attr(data-l);font-size:13px;font-weight:700;text-transform:uppercase;
             letter-spacing:.08em;color:var(--label);text-align:left;flex:none}
  /* La 1re cellule porte un nom + une precision : en flex elle se retrouve
     ecrasee et le nom se coupe. On empile le libelle au-dessus. */
  td:first-child{display:block;text-align:left;padding-top:14px}
  td:first-child::before{display:block;margin-bottom:4px}
  td[data-l=""]{justify-content:flex-end;padding-top:4px}
  td[data-l=""]::before{content:none}
  .btn{width:100%}
  h1{font-size:30px}
}
@media (max-width:400px){ .mot{font-size:22px} .rond{width:28px;height:28px} }

/* ── Écrans applicatifs ─────────────────────────────────────────────────── */
.bandeau{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:50;
  max-width:min(560px,92vw);padding:13px 22px;border-radius:14px;font-size:15px;font-weight:500;
  box-shadow:0 8px 28px rgba(43,33,28,.22)}
.bandeau.erreur{background:#8f2c14;color:#fff}
.bandeau.succes{background:#2c6b39;color:#fff}
.onglets{display:flex;gap:6px;flex-wrap:wrap;border-bottom:1px solid var(--bord);margin:26px 0 8px}
.onglets button{font-family:inherit;font-size:15px;font-weight:700;background:none;border:0;
  border-bottom:3px solid transparent;padding:11px 16px;cursor:pointer;color:var(--label);
  margin-bottom:-1px;min-height:44px}
.onglets button[aria-selected="true"]{color:var(--accent);border-bottom-color:var(--accent)}
.vide{padding:34px 20px;text-align:center;color:var(--label);font-size:15px;
  border:1px dashed var(--bord);border-radius:16px;margin-top:18px}
.champ textarea{width:100%;font-family:inherit;font-size:16px;padding:13px 15px;
  border:1px solid var(--bord);border-radius:12px;background:#fff;resize:vertical;min-height:120px}
.btn-petit{min-height:38px;padding:8px 16px;font-size:14px;border-radius:999px;
  font-family:inherit;font-weight:700;cursor:pointer;background:none;border:1.5px solid var(--bord);
  color:var(--texte-2)}
.btn-petit:hover{border-color:var(--accent);color:var(--accent)}
.btn-petit.danger:hover{border-color:#8f2c14;color:#8f2c14}
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.pile{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.code{font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-size:19px;font-weight:700;
  letter-spacing:.12em;background:var(--fond-doux);border-radius:10px;padding:9px 15px;
  display:inline-block;color:var(--encre);user-select:all}
dialog{border:0;border-radius:20px;padding:0;max-width:min(560px,94vw);width:100%;
  background:var(--fond);color:var(--encre)}
dialog::backdrop{background:rgba(43,33,28,.55)}
.modale{padding:28px}
.modale h2{margin-bottom:6px}
.reseaux{display:flex;gap:14px;justify-content:center;margin:18px 0 4px}
.reseaux a{display:inline-flex;width:40px;height:40px;border-radius:50%;align-items:center;
  justify-content:center;border:1.5px solid var(--texte-sombre-2);transition:border-color .15s,background .15s}
.reseaux a:hover{border-color:var(--accent-doux);background:rgba(233,78,34,.14)}
.reseaux svg{width:19px;height:19px;fill:var(--texte-sombre-2)}
.reseaux a:hover svg{fill:var(--accent-doux)}
@media (max-width:720px){ .actions{justify-content:flex-start} }