/* ==========================================================================
   Industries — styles specifiques (hub + pages sectorielles)
   Reutilise les variables et classes globales (styles.css, mckinsey.css) :
   --navy, --navy-deep, --gold, --gold-dark, --sable, --gray1/2/6/8,
   .wrap, .wrap-narrow, .pad, .eb-head, .tag-cat, .btn-gold, .btn-outline,
   .page-hero, .svc4-grid, .art-photo-grid.
   ========================================================================== */

/* ---- Fil d'Ariane et hero sectoriel : degrade localise (jamais un voile uniforme) ---- */
.ind-hero-note{display:none} /* reserve pour usage futur, evite selecteur vide */

/* ---- Hub industries.html : hero ---- */
.ind-hub-hero{position:relative;background:var(--navy-deep,#0a3850);color:#fff;overflow:hidden}
.ind-hub-hero-inner{position:relative;z-index:2;padding-block:clamp(1.75rem,5vh,3.25rem);padding-inline:clamp(1.15rem,4vw,1.5rem);margin-block-start:var(--nav-h,68px);max-width:1180px;margin-inline:auto}
.ind-hub-hero-band{position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#0c2c3a,var(--gold),#0e3446,#EAD9B6,#0c2c3a)}
.ind-hub-breadcrumb{font-size:.76rem;color:rgba(255,255,255,.5);margin-bottom:1.4rem}
.ind-hub-breadcrumb a{color:rgba(255,255,255,.7);text-decoration:none}
.ind-hub-hero h1{font-family:'Ibarra Real Nova',serif;font-size:clamp(1.9rem,1.15rem + 2.7vw,3.3rem);line-height:1.12;color:#fff;margin:.6rem 0 1.1rem;max-width:24ch}
.ind-hub-hero p{font-size:clamp(1rem,0.95rem + 0.3vw,1.12rem);color:rgba(255,255,255,.78);line-height:1.7;max-width:62ch;margin:0}
.ind-hub-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:clamp(1.5rem,4vh,2.5rem);border-top:1px solid rgba(255,255,255,.16)}
.ind-hub-strip img{width:100%;height:clamp(88px,14vh,150px);object-fit:cover;display:block;filter:saturate(.92)}
@media (max-width:760px){.ind-hub-strip{grid-template-columns:repeat(2,1fr)}}

/* ---- Banniere du hub : adaptation a la HAUTEUR disponible ----
   Les seuils ci-dessous ne creent pas quatre versions figees : ils bornent
   une progression continue deja portee par les `clamp()` ci-dessus.
     tres courte   <= 600px    respiration minimale, bande d'images reduite
     courte        601-720px   respiration resserree
     standard      721-900px   valeurs de reference
     haute         > 900px     la bande d'images retrouve sa presence
   Les encoches et barres systeme sont respectees via `env()`. */
.ind-hub-hero-inner{
  padding-inline:max(clamp(1.15rem,4vw,1.5rem),env(safe-area-inset-left),env(safe-area-inset-right));
}
@media (max-height:720px){
  .ind-hub-hero-inner{padding-block:clamp(1.25rem,3.2vh,2rem)}
  .ind-hub-strip{margin-top:clamp(1rem,2.6vh,1.6rem)}
  .ind-hub-strip img{height:clamp(76px,11vh,110px)}
}
@media (max-height:600px){
  .ind-hub-hero-inner{padding-block:clamp(1rem,2.6vh,1.5rem)}
  .ind-hub-hero h1{font-size:clamp(1.75rem,1.05rem + 2.3vw,2.6rem);margin:.45rem 0 .8rem}
  .ind-hub-strip img{height:clamp(64px,9vh,92px)}
}
@media (min-height:901px){
  .ind-hub-strip img{height:clamp(120px,15vh,170px)}
}
/* Telephone en paysage : la hauteur utile fond, la bande passe au second
   plan plutot que de manger tout l'ecran. */
@media (orientation:landscape) and (max-height:520px){
  .ind-hub-hero-inner{padding-block:1rem}
  .ind-hub-strip{margin-top:1rem}
  .ind-hub-strip img{height:64px}
}


/* ---- Lecture sectorielle ---- */
.ind-reading{background:#fff}
.ind-reading-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4rem);align-items:start;margin-top:2rem}
.ind-reading-list{border-top:1px solid var(--gray2)}
.ind-reading-list div{padding:1.25rem 0;border-bottom:1px solid var(--gray2)}
.ind-reading-list strong{display:block;color:var(--navy);font-family:'Ibarra Real Nova',serif;font-size:1.02rem;margin-bottom:.35rem}
.ind-reading-list span{color:var(--gray6);font-size:.9rem;line-height:1.65}
@media (max-width:820px){.ind-reading-grid{grid-template-columns:1fr}}

/* ---- Secteurs prioritaires (composition editoriale, pas des cartes identiques) ---- */
.ind-featured-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.75rem;margin-top:2.25rem}
.ind-featured-card{display:block;text-decoration:none;color:inherit;background:#fff}
.ind-featured-media{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--gray2)}
.ind-featured-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.ind-featured-card:hover .ind-featured-media img{transform:scale(1.035)}
.ind-featured-status{position:absolute;left:0;top:0;background:var(--navy-deep);color:#EAD9B6;font:700 .64rem/1 'Space Grotesk',sans-serif;letter-spacing:.08em;text-transform:uppercase;padding:.5rem .8rem}
.ind-featured-body{padding-top:1.1rem}
.ind-featured-body .tag-cat{color:var(--gold-dark,#A9803F)}
.ind-featured-body h3{font-family:'Ibarra Real Nova',serif;font-size:1.25rem;color:var(--navy);margin:.5rem 0 .6rem;line-height:1.3}
.ind-featured-body p{color:var(--gray6);font-size:.88rem;line-height:1.65;margin:0 0 .6rem}
.ind-featured-proof{font-size:.78rem;color:var(--gold-dark,#A9803F);font-weight:700}
@media (max-width:980px){.ind-featured-grid{grid-template-columns:1fr}}

/* ---- Rangee secondaire (secteurs etablis) : plus compacte ---- */
.ind-secondary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:1.75rem;border-top:1px solid var(--gray2);border-left:1px solid var(--gray2)}
.ind-secondary-card{display:block;text-decoration:none;color:inherit;padding:1.5rem 1.6rem;border-right:1px solid var(--gray2);border-bottom:1px solid var(--gray2)}
.ind-secondary-card .tag-cat{color:var(--gold-dark,#A9803F)}
.ind-secondary-card h4{font-family:'Ibarra Real Nova',serif;font-size:1.05rem;color:var(--navy);margin:.5rem 0 .5rem}
.ind-secondary-card p{color:var(--gray6);font-size:.85rem;line-height:1.6;margin:0}
@media (max-width:760px){.ind-secondary-grid{grid-template-columns:1fr}}

/* ---- Liste sobre pour secteurs en developpement / a documenter ---- */
.ind-list-compact{border-top:1px solid var(--gray2);margin-top:1.75rem}
.ind-list-compact a{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--gray2);text-decoration:none;color:inherit}
.ind-list-compact a:hover strong{color:var(--gold-dark,#A9803F)}
.ind-list-compact strong{color:var(--navy);font-family:'Ibarra Real Nova',serif;font-size:1rem;font-weight:700;transition:color .15s ease}
.ind-list-compact span{color:var(--gray6);font-size:.8rem;flex:0 1 auto;min-width:0}
/* Sous 600px, l'annotation ne peut plus tenir sur la meme ligne que le nom
   du secteur : elle passe dessous au lieu de sortir de l'ecran. */
@media (max-width:600px){
  .ind-list-compact a{flex-wrap:wrap;align-items:flex-start;gap:.3rem}
  .ind-list-compact span{flex:1 1 100%}
}

/* ---- Deux familles ---- */
.ind-families{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,3.5rem);margin-top:2.25rem}
.ind-family h3{font-family:'Ibarra Real Nova',serif;font-size:1.1rem;color:var(--navy);margin:0 0 1.1rem;padding-bottom:.9rem;border-bottom:2px solid var(--gold)}
.ind-family ul{list-style:none;margin:0;padding:0}
.ind-family li{border-bottom:1px solid var(--gray2)}
.ind-family a{display:block;padding:.9rem 0;color:var(--navy);font-size:.94rem;font-weight:600;text-decoration:none}
.ind-family a:hover{color:var(--gold-dark,#A9803F)}
.ind-family a small{display:block;font-weight:400;color:var(--gray6);font-size:.8rem;margin-top:.2rem}
@media (max-width:820px){.ind-families{grid-template-columns:1fr}}

/* ---- Enjeux transversaux ---- */
.ind-cross-list{display:grid;grid-template-columns:repeat(2,1fr);gap:0;margin-top:2rem;border-top:1px solid rgba(255,255,255,.16)}
.ind-cross-list div{padding:1.3rem 1.5rem 1.3rem 0;border-bottom:1px solid rgba(255,255,255,.16)}
.ind-cross-list strong{display:block;color:#fff;font-family:'Ibarra Real Nova',serif;font-size:1rem;margin-bottom:.4rem}
.ind-cross-list span{color:rgba(255,255,255,.65);font-size:.85rem;line-height:1.6}
.ind-cross-list a.ind-cross-link{color:#EAD9B6;font-size:.78rem;font-weight:700;text-decoration:none;display:inline-block;margin-top:.5rem}
@media (max-width:700px){.ind-cross-list{grid-template-columns:1fr}}

/* ---- Experiences du terrain ---- */
.ind-exp-list{margin-top:2rem}
.ind-exp-item{display:grid;grid-template-columns:140px 1fr;gap:1.5rem;padding:1.5rem 0;border-bottom:1px solid var(--gray2)}
.ind-exp-item:first-child{padding-top:0}
.ind-exp-item .tag{font:700 .68rem/1.3 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-dark,#A9803F)}
.ind-exp-item h4{font-family:'Ibarra Real Nova',serif;color:var(--navy);font-size:1.05rem;margin:0 0 .5rem}
.ind-exp-item p{color:var(--gray6);font-size:.88rem;line-height:1.65;margin:0 0 .5rem}
.ind-exp-item a{color:var(--navy);font-size:.8rem;font-weight:700;border-bottom:1px solid var(--gold);text-decoration:none}
@media (max-width:640px){.ind-exp-item{grid-template-columns:1fr;gap:.5rem}}

/* ---- Section "Ce que nous observons sur le terrain" (pages sectorielles) ---- */
.ind-observations{border-top:1px solid var(--gray2);margin-top:2.25rem;padding-top:.5rem}
.ind-obs-item{padding:1.75rem 0;border-bottom:1px solid var(--gray2)}
.ind-obs-item .tag-cat{margin-bottom:.6rem}
.ind-obs-item h3{font-family:'Ibarra Real Nova',serif;font-size:1.1rem;color:var(--navy);margin:0 0 .7rem;line-height:1.3}
.ind-obs-item p{color:var(--gray8);font-size:.9rem;line-height:1.75;margin:0 0 .6rem}
.ind-obs-source{font-size:.76rem;color:var(--gray6);font-style:italic}
.ind-obs-empty{padding:1.5rem 0;color:var(--gray6);font-size:.92rem;line-height:1.75;font-style:italic}

/* ---- Statut editorial (badge sobre pour secteurs en developpement / a documenter) ---- */
.ind-status-note{display:inline-block;font:700 .68rem/1 'Space Grotesk',sans-serif;letter-spacing:.06em;text-transform:uppercase;padding:.4rem .7rem;background:rgba(201,164,92,.12);color:var(--gold-dark,#A9803F);margin-bottom:1rem}

/* ---- CTA sectoriel de fin de page ---- */
.ind-final-cta{background:var(--navy);padding:3rem 2.5rem;text-align:center}
.ind-final-cta h2{color:#fff;font-family:'Ibarra Real Nova',serif;font-size:1.5rem;margin:.6rem 0 1rem}
.ind-final-cta p{color:rgba(255,255,255,.72);max-width:560px;margin:0 auto 1.6rem;line-height:1.7}
.ind-final-actions{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

/* ---- Responsive general ---- */
@media (max-width:1080px){
  .ind-featured-status,.ind-secondary-card .tag-cat,.ind-obs-item .tag-cat{font-size:var(--text-label,.7rem)}
}

/* ==========================================================================
   BANNIERES SECTORIELLES — un contenant commun, un cadrage par secteur

   Le contenant ne change jamais d'une page a l'autre : meme hauteur, memes
   marges, meme position du label et du H1, meme largeur de texte, meme
   construction de voile. Ce qui change, c'est la photographie, son cadrage
   et l'intensite du voile — parce qu'une salle de classe en plein jour et
   une usine de nuit n'ont pas la meme luminosite sous le titre.

   Les valeurs de voile ne sont pas choisies au juge. Pour chaque photo, la
   luminance reelle a ete relevee sous les boites de texte (fil d'Ariane,
   label, H1, chapo) a 1440, 1600 et 1920, et le voile retenu est le plus
   LEGER qui tienne les seuils de lisibilite aux trois largeurs. C'est
   pourquoi la grande industrie, sombre, ne recoit que .22 en milieu de
   cadre la ou le manufacturier, en haute lumiere, en demande .74.
   ========================================================================== */
.ind-hero{
  position:relative;
  min-height:470px;              /* identique sur les neuf pages */
  display:flex;
  /* Cale en haut, et non centre : centrer ferait descendre le titre sur les
     pages dont le chapo tient en trois lignes. Le label et le H1 tombent
     ainsi exactement a la meme hauteur d'un secteur a l'autre ; c'est la
     longueur du chapo, et elle seule, qui fait varier le vide du bas. */
  align-items:flex-start;
  overflow:hidden;
  background-color:#061F33;      /* filet : le bleu nuit est la avant la photo */
  background-repeat:no-repeat;
  background-size:cover;         /* ratio conserve, jamais d'etirement */
  background-position:center center;
}
.ind-hero > .page-hero-inner{width:100%}

/* Le voile est un calque et non une couche de la propriete background :
   cadrage de l'image et intensite du voile restent ainsi reglables
   separement, secteur par secteur. */
.ind-hero{
  --veil:6,31,51;
  --v1:.88; --v2:.82; --v3:.46;
  --s1:0%;  --s2:30%; --s3:56%; --s4:80%;
}
.ind-hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(var(--veil),var(--v1)) var(--s1),
    rgba(var(--veil),var(--v2)) var(--s2),
    rgba(var(--veil),var(--v3)) var(--s3),
    rgba(var(--veil),0)         var(--s4));
}

/* Fil d'Ariane : a .45 il plafonnait a 4,2:1 meme sur le voile plein.
   Remonte ici, sur les bannieres sectorielles seulement. */
.ind-hero .breadcrumb{color:rgba(255,255,255,.62)}
.ind-hero .breadcrumb a{color:rgba(255,255,255,.78)}

/* ---- Les neuf secteurs ----
   background-position : ce qui doit rester lisible dans le cadre.
   --v* : intensite du voile, calibree sur la photo.                         */

/* Les mains et l'interaction restent a droite du texte ; la fenetre floue,
   tres claire, sort du cadre par la gauche. */
.ind-hero[data-sector="sante"]{
  background-image:url('images/bannieres-industries/sante-services-sociaux.png');
  background-position:60% center;
  --v1:.94; --v2:.94; --v3:.50;
}
/* La fuite de la salle de cuves, donc la profondeur de la chaine. */
.ind-hero[data-sector="grande-industrie"]{
  background-image:url('images/bannieres-industries/grande-industrie-metallurgie.png');
  background-position:55% center;
  --v1:.76; --v2:.76; --v3:.22;
}
/* Les rangees de sieges sous le texte, la lumiere des fenetres a droite. */
.ind-hero[data-sector="education"]{
  background-image:url('images/bannieres-industries/education.png');
  background-position:40% center;
  --v1:.76; --v2:.76; --v3:.46;
}
/* Les coupes et la texture des billots, pas la lisiere sombre du bord. */
.ind-hero[data-sector="foret"]{
  background-image:url('images/bannieres-industries/foret-bois-transformation.png');
  background-position:60% center;
  --v1:.76; --v2:.76; --v3:.50;
}
/* Silos a grain, photo en haute lumiere : le ciel blanc du bord gauche
   sort du cadre, les silos sont conserves. */
.ind-hero[data-sector="manufacturier"]{
  background-image:url('images/bannieres-industries/manufacturier.png');
  background-position:20% center;
  --v1:.68; --v2:.68; --v3:.54;
}
/* La variete des casques : le cadrage garde les six teintes. */
.ind-hero[data-sector="construction"]{
  background-image:url('images/bannieres-industries/construction.png');
  background-position:45% center;
  --v1:.76; --v2:.76; --v3:.74;
}
/* Ligne d'embouteillage : le convoyeur et les bouteilles chaudes restent
   lisibles a droite du texte. */
.ind-hero[data-sector="agroalimentaire"]{
  background-image:url('images/bannieres-industries/agroalimentaire.png');
  background-position:100% center;
  --v1:.85; --v2:.85; --v3:.74;
}
/* Cadrage centre : c'est le seul qui doit tenir la ville ET le pont. */
.ind-hero[data-sector="municipal"]{
  background-image:url('images/bannieres-industries/secteur-municipal-public.png');
  background-position:50% center;
  --v1:.86; --v2:.84; --v3:.42;
}
/* Les connecteurs reseau restent a droite du texte, nets et non voiles. */
.ind-hero[data-sector="technologie"]{
  background-image:url('images/bannieres-industries/technologie-medias-telecommunications.png');
  background-position:17% center;
  --v1:.79; --v2:.79; --v3:.78;
}
/* L'etalage de commerce de detail : profondeur des rayons a gauche, produits
   nets a droite du texte. */
.ind-hero[data-sector="commerce"]{
  background-image:url('images/bannieres-industries/commerce-services.png');
  background-position:90% center;
  --v1:.79; --v2:.79; --v3:.52;
}