:root{
  --acier:#0B3D6E;      /* bleu profond, vif */
  --acier-2:#12528F;
  --beton:#E2EAF3;      /* gris bleuté clair */
  --blanc:#FAFBFC;
  --jaune:#FFB703;      /* jaune chantier vif */
  --texte:#14263A;
  --texte-doux:#46586C;
  --display:"Big Shoulders Display", "Arial Narrow", sans-serif;
  --corps:"Barlow", "Segoe UI", sans-serif;
  --largeur:1180px;
}
html[dir="rtl"]{
  --display:"IBM Plex Sans Arabic", "Segoe UI", sans-serif;
  --corps:"IBM Plex Sans Arabic", "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--blanc);color:var(--texte);font-family:var(--corps);font-size:18px;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--jaune);outline-offset:3px}
.conteneur{max-width:var(--largeur);margin:0 auto;padding:0 24px}

/* ---------- En-tête ---------- */
.entete{background:var(--acier);color:var(--blanc);position:sticky;top:0;z-index:10}
.entete .conteneur{display:flex;align-items:center;gap:24px;height:68px}
.marque{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:26px;letter-spacing:.02em;text-decoration:none;display:flex;align-items:center;gap:10px}
.marque i{display:inline-block;width:14px;height:26px;background:var(--jaune)}
.nav{display:flex;gap:28px;margin-inline-start:auto}
.nav a{text-decoration:none;font-weight:500;font-size:16px;color:#D3E1EE}
.nav a:hover{color:var(--blanc)}
.langue{background:none;border:1px solid #4F7FB0;color:var(--blanc);font:600 15px var(--corps);padding:7px 14px;border-radius:4px;cursor:pointer}
.langue:hover{border-color:var(--jaune)}

/* ---------- Hero ---------- */
.hero{background:var(--acier);color:var(--blanc);padding:72px 0 0;overflow:hidden}
.hero .conteneur{display:grid;grid-template-columns:1.25fr 1fr;gap:48px;align-items:end}
.ets{font-size:20px;color:#B9D0E6;margin:0 0 6px;font-weight:500}
.nom{font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:clamp(64px,10vw,150px);line-height:.84;margin:0;text-transform:uppercase;letter-spacing:-.005em}
.nom span{display:block;color:var(--beton)}
.nom-ar{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:700;font-size:30px;color:var(--jaune);margin:18px 0 0;direction:rtl;text-align:start}
html[dir="rtl"] .nom-ar{text-align:right}
.ex{margin:8px 0 0;color:#B9D0E6;font-size:17px}
.accroche{max-width:34ch;font-size:21px;color:#DCE8F3;margin:26px 0 34px}
.actions{display:flex;flex-wrap:wrap;gap:14px;padding-bottom:64px}
.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:600;font-size:17px;padding:14px 24px;border-radius:4px;border:2px solid transparent}
.btn-jaune{background:var(--jaune);color:var(--acier)}
.btn-jaune:hover{background:#FFC93C}
.btn-ligne{border-color:#6A93BD;color:var(--blanc)}
.btn-ligne:hover{border-color:var(--blanc)}
.btn svg{width:18px;height:18px}

.photo{position:relative;background:var(--acier-2);aspect-ratio:4/5;border-radius:6px 6px 0 0;overflow:hidden}
.photo img{width:100%;height:100%;object-fit:cover}
.photo.vide{background:repeating-linear-gradient(0deg,transparent 0 39px,#2366A8 39px 40px),repeating-linear-gradient(90deg,transparent 0 39px,#2366A8 39px 40px),var(--acier-2)}
.photo.vide img{display:none}
.photo .remplacer{display:none}
.photo.vide .remplacer{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;text-align:center;padding:24px;color:#A9C3DD;font-size:16px}

/* La bande jaune : l'élément fort de la page */
.bande{background:var(--jaune);color:var(--acier);position:relative}
.bande::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px;
  background:repeating-linear-gradient(-45deg,var(--jaune) 0 18px,var(--acier) 18px 36px)}
.bande ul{list-style:none;margin:0 auto;padding:0 24px;max-width:var(--largeur);display:grid;grid-template-columns:repeat(3,1fr)}
.bande li{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.6vw,32px);padding:22px 0;line-height:1.1}
.bande li + li{border-inline-start:2px solid rgba(11,61,110,.25);padding-inline-start:24px}

/* ---------- Sections ---------- */
section{padding:96px 0}
h2{font-family:var(--display);font-weight:900;font-size:clamp(40px,5vw,60px);line-height:1;margin:0 0 20px;color:var(--acier)}
html[dir="rtl"] h2{font-weight:700;line-height:1.25}
.intro{max-width:56ch;color:var(--texte-doux);margin:0 0 48px;font-size:19px}

.activites{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:3px solid var(--acier)}
.activite{padding:28px 28px 8px 0}
html[dir="rtl"] .activite{padding:28px 0 8px 28px}
.activite + .activite{border-inline-start:1px solid #C5D1DD;padding-inline-start:28px}
.activite h3{font-family:var(--display);font-weight:700;font-size:30px;margin:0 0 12px;color:var(--acier);line-height:1.1}
.activite p{margin:0;color:var(--texte-doux);max-width:36ch}

.aussi{margin-top:56px;padding-top:28px;border-top:1px solid #C5D1DD}
.aussi h3{font-size:19px;font-weight:600;margin:0 0 16px;color:var(--acier)}
.aussi ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.aussi li{border:1px solid #B4BBC1;border-radius:3px;padding:7px 14px;font-size:16px;color:var(--texte)}

.entreprise{background:var(--acier-2);color:var(--blanc)}
.entreprise h2{color:var(--blanc)}
.entreprise .intro{color:#C8DAEB;margin-bottom:0}
.entreprise-grille{display:grid;grid-template-columns:1fr 1.3fr;gap:64px;align-items:start}
.fiche{border:2px solid var(--jaune);border-radius:4px;padding:8px 32px}
.fiche-ligne{display:grid;grid-template-columns:190px 1fr;gap:24px;align-items:baseline;padding:22px 0}
.fiche-ligne + .fiche-ligne{border-top:1px solid #3A73AB}
.fiche-grand{font-family:var(--display);font-weight:900;font-size:36px;line-height:1;color:var(--jaune)}
html[dir="rtl"] .fiche-grand{font-weight:700;font-size:30px}
.fiche p{margin:0;color:#E4EEF7}

.materiel{background:var(--beton)}
.materiel .conteneur{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:start}
.materiel .intro{margin-bottom:0}
.preuve{margin:24px 0 0;padding-inline-start:16px;border-inline-start:4px solid var(--jaune);color:var(--acier);font-weight:500;font-size:17px;max-width:46ch}
.liste-materiel{list-style:none;margin:0;padding:0}
.liste-materiel li{display:flex;gap:18px;align-items:baseline;padding:22px 0;border-bottom:1px solid #B4C4D4;font-size:22px;font-weight:600;color:var(--acier)}
.liste-materiel li:first-child{border-top:3px solid var(--acier)}
.liste-materiel small{display:block;font-weight:400;font-size:17px;color:var(--texte-doux);margin-top:4px}
.liste-materiel i{flex:none;width:12px;height:12px;background:var(--jaune);border:2px solid var(--acier);transform:translateY(-2px)}

.galerie{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px}
.galerie figure{margin:0}
.galerie .photo{aspect-ratio:4/3;border-radius:6px}
.galerie figure:first-child .photo{aspect-ratio:auto;height:100%;min-height:300px}
.galerie figure:first-child{grid-row:span 2;display:flex;flex-direction:column}
.galerie figure:first-child .photo{flex:1}
.galerie figcaption{font-size:16px;color:var(--texte-doux);padding:10px 2px 0}
.galerie figcaption b{color:var(--acier);font-weight:600}

/* ---------- Contact ---------- */
.contact{background:var(--acier);color:var(--blanc)}
.contact h2{color:var(--blanc)}
.contact .intro{color:#C8DAEB}
.contact-grille{display:grid;grid-template-columns:1.2fr 1fr;gap:64px;align-items:start}
.tel{white-space:nowrap;font-family:"Big Shoulders Display",sans-serif;font-weight:900;font-size:clamp(44px,6vw,76px);color:var(--jaune);text-decoration:none;line-height:1;display:inline-block;margin-bottom:28px;direction:ltr;unicode-bidi:isolate}
.tel:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:8px}
dl{margin:0}
dl div{padding:18px 0;border-bottom:1px solid #2C5F92}
dl div:first-child{border-top:1px solid #2C5F92}
dt{color:#9DBBD8;font-size:15px;margin-bottom:2px}
dd{margin:0;font-size:19px}
dd a{text-decoration:none}
dd a:hover{text-decoration:underline}

footer{background:#072B4F;color:#9DB7D2;font-size:15px;padding:24px 0}
footer .conteneur{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Mobile ---------- */
@media (max-width:900px){
  .nav{display:none}
  .marque{font-size:21px;white-space:nowrap}
  .langue{margin-inline-start:auto}
  .hero{padding-top:44px}
  .hero .conteneur{grid-template-columns:1fr;gap:0}
  .hero .photo{aspect-ratio:16/10;border-radius:6px 6px 0 0}
  .actions{padding-bottom:40px}
  .bande ul{grid-template-columns:1fr}
  .bande li{padding:14px 0}
  .bande li + li{border-inline-start:0;padding-inline-start:0;border-top:2px solid rgba(11,61,110,.25)}
  section{padding:64px 0}
  .activites{grid-template-columns:1fr}
  .activite,html[dir="rtl"] .activite{padding:24px 0}
  .activite + .activite{border-inline-start:0;padding-inline-start:0;border-top:1px solid #C5D1DD}
  .fiche{padding:4px 20px}
  .fiche-ligne{grid-template-columns:1fr;gap:6px}
  .materiel .conteneur,.contact-grille,.entreprise-grille{grid-template-columns:1fr;gap:36px}
  .galerie{grid-template-columns:1fr 1fr}
  .galerie figure:first-child{grid-column:span 2;grid-row:auto}
  .galerie figure:first-child .photo{min-height:220px;aspect-ratio:16/10}
}

/* ---------- Ajouts pour le site du groupe ---------- */
.nav a[aria-current="page"]{color:var(--blanc);box-shadow:inset 0 -3px 0 var(--jaune);padding-bottom:4px}
.fil{font-size:15px;color:#A9C3DD;margin:0 0 18px}
.fil a{color:#D3E1EE;text-decoration:none}
.fil a:hover{text-decoration:underline}
.fil span{margin:0 8px;color:#6A93BD}

/* Les deux entreprises */
.entreprises{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ent{background:var(--blanc);border:1px solid #C5D1DD;border-top:6px solid var(--jaune);border-radius:4px;padding:32px;display:flex;flex-direction:column}
.ent .forme{font-size:15px;color:var(--texte-doux);margin:0 0 4px}
.ent h3{font-family:var(--display);font-weight:900;font-size:clamp(32px,3.4vw,44px);line-height:1;margin:0;color:var(--acier)}
html[dir="rtl"] .ent h3{font-weight:700;line-height:1.3}
html[dir="ltr"] .ent .nom-ar-court{text-align:left}
html[dir="rtl"] .ent .nom-ar-court{text-align:right}
.ent .nom-ar-court{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:600;color:#9A6700;margin:8px 0 0;font-size:18px}
.ent .metier{font-size:19px;margin:18px 0 22px;color:var(--texte);max-width:40ch}
.ent dl{margin:0 0 28px}
.ent dl div{display:flex;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid #D5DFE9}
.ent dl div:first-child{border-top:1px solid #D5DFE9}
.ent dt{color:var(--texte-doux);font-size:16px;margin:0}
.ent dd{margin:0;font-weight:600;color:var(--acier);font-size:17px;text-align:end}
.ent .btn{margin-top:auto;align-self:flex-start}
.btn-acier{background:var(--acier);color:var(--blanc)}
.btn-acier:hover{background:#0F4F8C}

/* Frise chronologique (vraie suite d'événements) */
.frise{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.frise li{position:relative;padding:34px 24px 0 0}
html[dir="rtl"] .frise li{padding:34px 0 0 24px}
.frise li::before{content:"";position:absolute;top:8px;inset-inline-start:0;inset-inline-end:0;height:3px;background:var(--acier)}
.frise li::after{content:"";position:absolute;top:0;inset-inline-start:0;width:16px;height:16px;border-radius:50%;background:var(--jaune);border:3px solid var(--acier)}
.frise .annee{font-family:var(--display);font-weight:900;font-size:44px;line-height:1;color:var(--acier);display:block;margin-bottom:10px}
html[dir="rtl"] .frise .annee{font-weight:700}
.frise p{margin:0;color:var(--texte-doux);max-width:30ch}

/* Lien vers l'autre entreprise */
.autre{background:var(--jaune);color:var(--acier)}
.autre .conteneur{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-top:36px;padding-bottom:36px}
.autre p{margin:0;font-size:20px;font-weight:500;max-width:52ch}
.autre b{font-family:var(--display);font-weight:900;font-size:28px;display:block;line-height:1.1}
html[dir="rtl"] .autre b{font-weight:700}
section.autre{padding:0}

/* Tableau des références */
.refs-zone{margin-top:56px}
.refs-zone h3{font-family:var(--display);font-weight:700;font-size:32px;color:var(--acier);margin:0 0 8px}
.refs-zone .intro{margin-bottom:24px}
.refs{width:100%;border-collapse:collapse;font-size:16px}
.refs th{text-align:start;font-weight:600;color:var(--texte-doux);font-size:15px;padding:10px 12px;border-bottom:3px solid var(--acier)}
.refs td{padding:14px 12px;border-bottom:1px solid #D5DFE9;vertical-align:top}
.refs td:first-child{font-family:var(--display);font-weight:900;font-size:22px;color:var(--acier);white-space:nowrap}
html[dir="rtl"] .refs td:first-child{font-weight:700}
.refs td:nth-child(2){color:var(--texte);font-weight:500}
.refs td:nth-child(3),.refs td:nth-child(4){color:var(--texte-doux)}
.refs tbody tr:hover{background:#EDF3F9}

@media (max-width:900px){
  .entete .conteneur{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:0;row-gap:4px}
  .nav{display:flex;order:3;width:100%;overflow-x:auto;gap:22px;padding:8px 0 12px;margin:0;white-space:nowrap}
  .nav a{font-size:15px}
  .entreprises{grid-template-columns:1fr}
  .ent{padding:24px}
  .frise{grid-template-columns:1fr;gap:0}
  .frise li,html[dir="rtl"] .frise li{padding:0 0 28px 36px}
  html[dir="rtl"] .frise li{padding:0 36px 28px 0}
  .frise li::before{top:0;bottom:0;height:auto;width:3px;inset-inline-start:6px;inset-inline-end:auto}
  .frise li::after{top:4px}
  .frise .annee{font-size:34px}
  .refs thead{display:none}
  .refs,.refs tbody,.refs tr,.refs td{display:block;width:100%}
  .refs tr{padding:14px 0;border-bottom:1px solid #D5DFE9}
  .refs td{border:0;padding:2px 0}
  .refs td:first-child{font-size:20px}
}

/* Nous trouver : bureau et parc matériel */
.trouver .conteneur{display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:center}
.trouver .intro{margin-bottom:28px}
.carte{border-radius:6px;overflow:hidden;border:3px solid var(--acier);aspect-ratio:16/10;background:var(--beton);display:flex;align-items:center;justify-content:center;text-align:center;padding:0}
.carte iframe{width:100%;height:100%;border:0;display:block}
.carte .sans-carte{padding:32px;color:var(--acier);font-weight:500}
.carte .sans-carte b{display:block;font-family:var(--display);font-weight:900;font-size:34px;margin-bottom:6px}
@media (max-width:900px){.trouver .conteneur{grid-template-columns:1fr;gap:28px}}

[hidden]{display:none !important}

.refs-zone .plus{margin-top:24px}
.refs tr[hidden]{display:none}
@media (max-width:900px){.tel{font-size:clamp(34px,9vw,48px)}}

.galerie figcaption{color:var(--acier);font-weight:500}
.galerie.g2,.galerie.g3,.galerie.g4{grid-template-columns:repeat(2,1fr)}
.galerie.g2 figure:first-child,.galerie.g3 figure:first-child,.galerie.g4 figure:first-child{grid-row:auto;grid-column:auto;display:block}
.galerie.g2 .photo,.galerie.g2 figure:first-child .photo{aspect-ratio:4/3;min-height:0;height:auto}

/* Le gérant */
.gerant-grille{display:grid;grid-template-columns:320px 1fr;gap:56px;align-items:center}
.gerant .photo.portrait{aspect-ratio:4/5;border-radius:6px;border-bottom:8px solid var(--jaune)}
.gerant .role{margin:0 0 6px;color:var(--texte-doux);font-size:17px}
.gerant h2{margin-bottom:4px}
.gerant .nom-ar-court{font-family:"IBM Plex Sans Arabic",sans-serif;font-weight:600;color:#9A6700;font-size:20px;margin:0 0 20px}
html[dir="ltr"] .gerant .nom-ar-court{text-align:left}
.gerant .intro{margin-bottom:0}
@media (max-width:900px){.gerant-grille{grid-template-columns:1fr;gap:28px}.gerant .photo.portrait{max-width:300px}}
html[dir="rtl"] .gerant h2{text-align:right}