/* Site vitrine d'ECHAFI de BTP — feuille commune aux trois langues.
   Couleurs reprises du logo : orange #F56622, gris anthracite. */
:root{
  --orange:#F56622; --orange-fonce:#C9501A; --orange-clair:#FDEEE5;
  --anthracite:#2B3034; --encre:#1A1F23; --doux:#5C656C; --trait:#E3E6E8;
  --fond2:#F6F7F8; --blanc:#FFFFFF;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--blanc);color:var(--encre);font:16px/1.6 system-ui,"Segoe UI",Roboto,sans-serif}
:lang(ar) body,body:lang(ar){font-family:"Segoe UI","Noto Naskh Arabic",Tahoma,sans-serif}
a{color:var(--orange-fonce)}
img{max-width:100%;display:block}
.largeur{max-width:72rem;margin:0 auto;padding:0 24px}

/* En-tête */
.tete{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.97);border-bottom:1px solid var(--trait)}
.tete .largeur{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.marque img{height:48px;width:auto}
.menu{display:flex;gap:20px;font-size:.92rem}
.menu a{color:var(--doux);text-decoration:none}
.menu a:hover{color:var(--orange-fonce)}
.droite{display:flex;align-items:center;gap:14px}
.langues{display:flex;gap:4px;font-size:.8rem}
.langues a{padding:2px 7px;border-radius:4px;color:var(--doux);text-decoration:none;border:1px solid transparent}
.langues a[aria-current]{border-color:var(--trait);color:var(--encre);font-weight:700}
.bouton{display:inline-block;background:var(--orange);color:#fff;border:0;border-radius:6px;padding:.55rem 1.1rem;
        font:600 .92rem/1.2 inherit;text-decoration:none;cursor:pointer}
.bouton:hover{background:var(--orange-fonce)}
.bouton.clair{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.55)}
.bouton.clair:hover{background:rgba(255,255,255,.08)}

/* La une */
.une{background:linear-gradient(115deg,#2B3034 0%,#373D42 55%,#4A3A31 100%);color:#fff;padding:72px 0 64px}
.une h1{font-size:2.3rem;line-height:1.2;margin:0 0 .8rem;max-width:44rem}
.une p{color:#D9DEE1;max-width:42rem;margin:0 0 1.6rem;font-size:1.05rem}
.une .actions{display:flex;gap:10px;flex-wrap:wrap}

.chiffres{border-bottom:1px solid var(--trait)}
.chiffres .largeur{display:grid;grid-template-columns:repeat(4,1fr)}
.chiffres div div{padding:22px 20px;border-inline-end:1px solid var(--trait)}
.chiffres div div:last-child{border-inline-end:0}
.chiffres strong{display:block;font-size:1.7rem;color:var(--orange-fonce);line-height:1.2}
.chiffres span{font-size:.86rem;color:var(--doux)}

/* Rubriques */
section{padding:64px 0;border-bottom:1px solid var(--trait);scroll-margin-top:68px}
section.grise{background:var(--fond2)}
.surtitre{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-fonce);font-weight:700;margin:0 0 .3rem}
:lang(ar) .surtitre{letter-spacing:0}
h2{font-size:1.6rem;margin:0 0 1.4rem;line-height:1.25}
.trois{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.bloc{background:#fff;border:1px solid var(--trait);border-radius:10px;padding:20px;border-top:3px solid var(--orange)}
.bloc h3{margin:0 0 .4rem;font-size:1.05rem}
.bloc p{margin:0;color:var(--doux);font-size:.94rem}
.zones{display:flex;flex-wrap:wrap;gap:10px}
.zones span{background:#fff;border:1px solid var(--trait);border-radius:999px;padding:.35rem .9rem;font-size:.92rem}
.zones b{color:var(--orange-fonce)}
.qualif{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--trait);border-radius:10px;overflow:hidden;background:#fff}
.qualif div{padding:20px;border-inline-end:1px solid var(--trait)}
.qualif div:last-child{border-inline-end:0}
.qualif small{display:block;color:var(--doux);font-size:.78rem;text-transform:uppercase;letter-spacing:.05em}
:lang(ar) .qualif small{letter-spacing:0}
.qualif strong{font-size:1.25rem}
.qualif em{display:block;font-style:normal;color:var(--doux);font-size:.86rem}

/* Références : tableau sur écran large, cartes sur téléphone */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:.94rem;background:#fff;border:1px solid var(--trait);border-radius:10px;overflow:hidden}
thead th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--doux);text-align:start;padding:.75rem 1rem;background:var(--fond2);border-bottom:1px solid var(--trait)}
:lang(ar) thead th{letter-spacing:0}
tbody td{padding:.75rem 1rem;border-bottom:1px solid var(--trait);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even) td{background:#FBFBFC}
td.lieu{white-space:nowrap;color:var(--doux)}

/* Formulaire */
.contact{display:grid;grid-template-columns:2fr 1fr;gap:40px;align-items:start}
form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
form .plein{grid-column:1/-1}
label{display:block;font-size:.84rem;color:var(--doux);margin:0 0 .25rem}
label .obl{color:var(--orange-fonce)}
input,select,textarea{width:100%;border:1px solid #CDD3D7;border-radius:6px;padding:.6rem .7rem;font:inherit;font-size:.95rem;background:#fff;color:var(--encre)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--orange);outline-offset:0;border-color:var(--orange)}
textarea{min-height:8rem;resize:vertical}
.piege{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.envoi{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.petit{font-size:.84rem;color:var(--doux)}
.reponse{grid-column:1/-1;border-radius:8px;padding:12px 14px;display:none}
.reponse.ok{display:block;background:#E6F2EA;color:#24593E}
.reponse.ko{display:block;background:var(--orange-clair);color:#8A3510}
.coordonnees{background:var(--fond2);border:1px solid var(--trait);border-radius:10px;padding:20px}
.coordonnees h3{margin:0 0 .6rem;font-size:1rem}
.coordonnees p{margin:0 0 .5rem;color:var(--doux);font-size:.94rem}

.pied{background:var(--anthracite);color:#B9C1C6;font-size:.86rem;padding:24px 0}
.pied .largeur{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.barre-ecrire{display:none}

/* Téléphone */
@media (max-width:860px){
  .menu{display:none}
  .marque img{height:40px}
  .une{padding:44px 0 40px}
  .une h1{font-size:1.6rem}
  .chiffres .largeur{grid-template-columns:1fr 1fr;padding:0}
  .chiffres div div:nth-child(2){border-inline-end:0}
  .chiffres div div:nth-child(-n+2){border-bottom:1px solid var(--trait)}
  section{padding:44px 0}
  h2{font-size:1.3rem}
  .trois,.qualif,.contact,form{grid-template-columns:1fr}
  .qualif div{border-inline-end:0;border-bottom:1px solid var(--trait)}
  .qualif div:last-child{border-bottom:0}
  table,thead,tbody,tr,td{display:block}
  table{border:0;background:transparent}
  thead{display:none}
  tbody tr{background:#fff;border:1px solid var(--trait);border-radius:10px;padding:12px 14px;margin:0 0 10px;border-top:3px solid var(--orange)}
  tbody td,tbody tr:nth-child(even) td{padding:0;border:0;background:transparent}
  tbody td:first-child{font-weight:700;margin-bottom:.2rem}
  td.lieu{white-space:normal;font-size:.88rem}
  .largeur{padding:0 16px}
  body{padding-bottom:48px}
  .barre-ecrire{display:block;position:fixed;left:0;right:0;bottom:0;z-index:5;background:var(--orange);color:#fff;text-align:center;
                font-weight:700;padding:13px;text-decoration:none}
}