/* ============================================================================
   SOCLE DU GABARIT SECTEUR (07/08) — UNIFICATION
   Les six pages FR utilisaient grid4/card/platform-cta/o4-adapt-row/arrow, les
   six EN cap-grid/cap-card/cap-link/adapt-item/arrow-col. Aucune classe en
   commun : chaque modification se faisait deux fois, et trois bugs de parité en
   sont sortis. Le français adopte les classes anglaises.

   Ces règles-ci vivaient uniquement dans la feuille de style des pages
   ANGLAISES. Sans elles ici, renommer les classes françaises laisserait les
   pages FR sans mise en forme. Reprises telles quelles.
   ============================================================================ */
.cap-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.25rem; margin-top:1.5rem; }
.cap-card{
  border:1px solid var(--hair); border-radius:1rem; padding:1.5rem 1.6rem;
  background:var(--deep); display:flex; flex-direction:column; gap:.6rem;
}
.cap-card h3{
  font-family:var(--display); font-weight:600; font-size:1rem; margin:0;
  color:var(--bone); letter-spacing:-.01em;
}
.cap-card p.cap-desc{ color:var(--mute); font-size:.9rem; line-height:1.55; margin:0; }
.cap-card ul{
  list-style:none; margin:.4rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.4rem;
}
.cap-card ul li{
  position:relative; padding-left:.9rem; color:var(--mute);
  font-size:.83rem; line-height:1.5;
}
.cap-card ul li::before{
  content:"\2013"; position:absolute; left:0; color:var(--brand-magenta-tint);
}
.cap-card a.cap-link{
  display:inline-flex; align-items:center; gap:.35rem; margin-top:.4rem;
  color:var(--brand-magenta-deep,#9A0049); text-decoration:none;
}
.cap-card a.cap-link:hover{ color:var(--brand-magenta,#C00060); }
.cap-card a.cap-link svg{ width:11px; height:11px; flex:none; }
.adapt-list{ display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; }
.adapt-item{
  display:grid; grid-template-columns:1fr 24px 1fr; gap:1.1rem; align-items:start;
  border:1px solid var(--hair); border-radius:.85rem; padding:1.2rem 1.4rem;
  background:var(--deep);
}
.adapt-item .arrow-col{
  color:var(--brand-magenta-tint); font-size:1.05rem; text-align:center; padding-top:.2rem;
}
.adapt-item p{ margin:0; color:var(--bone); font-size:.87rem; line-height:1.55; }
@media (max-width:820px){
  .cap-grid{ grid-template-columns:1fr; }
  .adapt-item{ grid-template-columns:1fr; gap:.6rem; }
  .adapt-item .arrow-col{ display:none; }
}

/* ============================================================================
   CALQUE PAGES SECTEUR — 14 pages.
   Attention : les versions EN et FR sont deux gabarits différents, sans aucune
   classe de carte en commun. Chaque règle est donc écrite en double, un
   sélecteur par gabarit. Les paires sont signalées « EN / FR ».
   ============================================================================ */

/* --- 1. Cartes de capacité, gabarit unique `.cap-card` depuis le 07/08.
       Même rayon, mêmes trois couches d'ombre et même soulèvement que les
       cartes de l'accueil. Pas de contour rose au survol : la carte garde sa
       couleur, l'ombre suffit. --- */
.cap-card{
  border:1px solid transparent !important;
  border-radius:1.4rem !important;
  padding:1.7rem 1.7rem !important;
  background:var(--deep) !important;
  box-shadow:0 1px 2px rgba(18,19,42,.04), 0 22px 44px -24px rgba(18,19,42,.13),
             0 26px 52px -28px rgba(192,0,96,.10);
  transition:transform .25s cubic-bezier(.22,.7,.2,1), box-shadow .25s ease;
}
.cap-card:hover{
  transform:translateY(-4px);
  border-color:transparent !important;
  box-shadow:0 1px 2px rgba(18,19,42,.05), 0 30px 54px -24px rgba(18,19,42,.17),
             0 34px 66px -28px rgba(192,0,96,.18);
}

/* --- 2. Blocs de comparaison, gabarit unique `.adapt-item` depuis le 07/08.
       Rayon un cran en dessous des cartes : ce sont des lignes de tableau,
       pas des objets à cliquer. --- */
.adapt-item{
  border:1px solid transparent !important;
  border-radius:1.2rem !important;
  padding:1.3rem 1.5rem !important;
  box-shadow:0 1px 2px rgba(18,19,42,.03), 0 14px 30px -20px rgba(18,19,42,.10);
}
.adapt-item h3{
  font-family:var(--body,"Archivo",system-ui,sans-serif) !important;
  text-transform:none !important; letter-spacing:0 !important;
  font-size:.86rem !important; font-weight:600;
}
.adapt-item .arrow-col{ color:var(--brand-magenta,#C00060) !important; }

/* --- 3. Liens d'action, gabarit unique `.cap-link` depuis le 07/08.
       Fin des majuscules et du monospace. Le lien EN reste un lien texte, le
       CTA FR devient une pilule contour → plein, comme partout ailleurs. --- */
.cap-card a.cap-link{
  font-family:var(--body,"Archivo",system-ui,sans-serif) !important;
  text-transform:none !important; letter-spacing:0 !important;
  font-size:.95rem !important; font-weight:600;
}
.cap-card a.cap-link{ color:var(--brand-magenta,#C00060) !important; }
.cap-card a.cap-link:hover{ color:var(--brand-magenta-deep,#800040) !important; }
/* (la pilule posee ici le 03/08 a ete retiree : l'anglais utilise un lien texte,
   et c'est ce format qui est retenu. Voir le point 15.) */

/* --- 4. Listes de capacités FR : le tiret d'énumération reprend le magenta
       de marque, pas le rose clair. --- */
.cap-list li::before{ color:var(--brand-magenta,#C00060) !important; }
.cap-list li{ font-size:.86rem !important; }

/* --- 5. Illustration de titre. Les six pages EN avaient un PNG de 60 px ;
       les six FR n'avaient rien du tout. Les deux reçoivent maintenant la
       même illustration du sprite, teintée par le secteur. --- */
header.top .icn-hero, header.top .ind-hero{
  width:64px !important; height:64px !important;
  margin:0 0 1.25rem !important; display:block; flex:none;
}
header.top .ind-hero svg{ width:100%; height:100%; overflow:visible; --knock:#fff; }

/* --- 6. Tuiles de la page d'index : la teinte du secteur pilote la puce,
       le contour au survol et le halo, comme sur l'accueil. --- */
.ind__icn.il-host{ width:40px !important; height:40px !important; display:block; flex:none; }
.ind__icn.il-host svg{ width:100%; height:100%; overflow:visible; --knock:#fff; }
.cap-grid{ gap:1.5rem !important; }

/* --- 7. Hiérarchie du bloc comparatif inversée.
       v26 mettait « Their reality » en magenta et la colonne de réponse en gris :
       le problème du client ressortait, la solution s'effaçait. Sur une page qui
       vend, c'est l'inverse qu'il faut. La colonne de gauche passe en gris, celle
       de droite prend le magenta. Troisième enfant : gauche, flèche, droite. --- */
.adapt-item .theirs h3{ color:var(--mute) !important; }
.adapt-item > *:nth-child(3) h3{
  color:var(--brand-magenta,#C00060) !important;
}

/* --- 8. Corps des cartes à la même échelle que le reste du site. --- */
.cap-card p.cap-desc{ font-size:.95rem !important; line-height:1.6 !important; }
.cap-card h3{ font-size:1.1rem !important; }

/* --- 9. La pastille colorée des cartes FR a été supprimée du balisage lors de
       l'unification du 07/08. La règle qui la masquait n'a plus d'objet. --- */

/* --- 10. Rythme propre aux pages secteur.
       Le calque global pose 7rem, calibrés sur l'accueil et ses sept sections :
       deux marges se rejoignent, l'œil voit 14rem, soit 224 px entre deux blocs.
       Ces pages n'en ont que trois, et courtes. 4,5rem ramène l'écart à 9rem
       (144 px), assez pour séparer sans disloquer.
       Ce fichier n'est injecté que sur les 14 pages secteur, donc ces règles ne
       peuvent pas déborder ailleurs. --- */
section.block, #pipeline{ padding:4.5rem 0 !important; }
header.top + section.block{ padding-top:3.25rem !important; }
.cta{ padding:6rem 0 7rem !important; }
@media (max-width:700px){
  section.block, #pipeline{ padding:3rem 0 !important; }
  header.top + section.block{ padding-top:2.25rem !important; }
  .cta{ padding:4rem 0 4.5rem !important; }
}

/* --- 11. En-tête sur une colonne, accroche élargie.
       J'avais proposé une grille à deux colonnes, avec l'accroche à droite calée
       sur la ligne de base du titre. Techniquement ça marchait, visuellement non :
       la colonne de gauche est trop courte, le fossé trop large, et le paragraphe
       flottait en haut à droite avec du vide dessous — deux fragments plutôt
       qu'un en-tête. Abandonné.
       Reste la vraie cause du vide : l'accroche était bridée à 44 caractères,
       une valeur pensée pour le hero de l'accueil où le texte se pose sur une
       photo. v26 utilisait 62 sur les pages internes. On y revient, et on
       resserre le bas de l'en-tête, devenu trop haut pour ce qu'il contient. */
header.top p.lead{ max-width:62ch !important; font-size:1.15rem !important; }
header.top{ padding-bottom:1.75rem !important; }

/* --- 12. Bloc « plateformes mobilisées », en flux normal sous l'accroche.
       J'ai tenté deux fois de le placer en colonne de droite ; les deux fois le
       résultat était mauvais à l'écran alors que le code était correct. Je ne
       peux pas afficher ces pages, donc je ne corrige pas une mise en page à
       l'aveugle. Disposition simple, qui ne peut pas casser.
   (ancien commentaire ci-dessous, conservé pour mémoire)
       Bloc dans la colonne de droite.
       La grille à deux colonnes revient, mais cette fois avec du contenu réel
       à droite plutôt qu'un paragraphe orphelin — c'est ce qui manquait au
       premier essai. Quatre rangées DÉCLARÉES : sans ça, `grid-row:1/-1` ne
       s'étend pas et le bloc retombe dans la première rangée (erreur commise
       plus tôt aujourd'hui). --- */
.ind-stack{ margin:2.25rem 0 0; }
.ind-stack__h{
  display:flex; align-items:center; gap:.8rem;
  font-size:.95rem; font-weight:600; letter-spacing:0;
  color:var(--brand-magenta,#C00060); margin:0 0 1rem;
}
.ind-stack__h::before{
  content:""; display:block; width:2.25rem; height:1px; flex:none;
  background:linear-gradient(90deg,var(--brand-magenta,#C00060),transparent);
}
.ind-stack__list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.ind-stack__list a{
  display:block; padding:.55rem 0 .55rem 1.1rem;
  border-left:2px solid color-mix(in srgb, var(--c, var(--brand-magenta,#C00060)) 55%, transparent);
  color:var(--bone); font-size:1rem; font-weight:500; text-decoration:none;
  transition:border-color .2s ease, color .2s ease, padding-left .2s ease;
}
.ind-stack__list a:hover{
  border-left-color:var(--c, var(--brand-magenta,#C00060));
  color:var(--brand-magenta-deep,#800040); padding-left:1.4rem;
}

/* --- 13. Tuiles de l'index secteur : le francais empilait deux <span>, sans
       aucun titre de niveau 3 sur la page. Converti en <h3> + <p> comme
       l'anglais. Ces regles alignent le rendu des deux langues, la francaise
       n'ayant jamais eu de style pour .ind h3 ni .ind p. --- */
.ind h3{
  font-family:var(--display); font-weight:600; font-size:.98rem;
  margin:.2rem 0 0; color:var(--bone);
}
.ind p{ color:var(--mute); font-size:.85rem; line-height:1.55; margin:.5rem 0 0; }

/* --- 14. Tuiles de l'index secteur : même disposition dans les deux langues.
       L'anglais empile l'illustration au-dessus du texte, le français les
       alignait côte à côte — un `display:flex` en ligne hérité de v26 que
       l'anglais surchargeait et pas le français. On force la colonne pour les
       deux, ce qui laisse aussi respirer la description sur trois lignes. --- */
.ind{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
}

/* --- 15. Format des cartes de capacité : celui de l'anglais pour les deux.
       Le français affichait quatre colonnes et un bouton en pilule, l'anglais
       deux colonnes et un lien texte. Deux colonnes laissent respirer des cartes
       qui portent un titre, une accroche et trois puces ; à quatre, le texte
       s'étrangle. Et le lien texte est juste : ces cartes renvoient vers une
       page plateforme, ce n'est pas l'action principale de la page.
       La pilule venait de mon propre calque, posée plus tôt dans la journée. --- */
.cap-grid{ grid-template-columns:repeat(2,1fr) !important; gap:1.5rem !important; }
.cap-card a.cap-link{
  display:inline-flex; align-items:center; gap:.35rem;
  margin-top:.6rem !important; padding:0 !important;
  border:none !important; background:none !important; border-radius:0 !important;
  color:var(--brand-magenta,#C00060) !important;
  font-size:.95rem !important; font-weight:600; box-shadow:none !important;
}
.cap-card a.cap-link:hover{
  color:var(--brand-magenta-deep,#800040) !important;
  background:none !important; border:none !important;
}
@media (max-width:900px){ .cap-grid{ grid-template-columns:1fr !important; } }

/* --- 16. Filigrane de secteur.
       Un titre court laisse la moitie droite de l'en-tete deserte. Plutot que
       d'y mettre du faux contenu, on y pose l'illustration du secteur en grand
       et tres pale — le procede du « 4 » de la page contact, qui est a 4,5 %.
       Ici 7 % : l'illustration est coloree, elle ne serait pas visible a 4,5 %,
       et sa teinte rappelle celle du secteur. Elle reste sous le texte et hors
       de la couche d'accessibilite (aria-hidden). --- */
header.top{ position:relative; overflow:hidden; }
header.top > .wrap{ position:relative; z-index:1; }
.ind-watermark{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:min(32vw, 360px); aspect-ratio:1; z-index:0;
  opacity:.08; pointer-events:none; user-select:none;
}
/* Le .wrap doit porter le reperage, sinon le filigrane se cale sur la fenetre
   entiere et sort de l'ecran sur un grand moniteur. */
header.top > .wrap{ position:relative; }
.ind-watermark svg{ width:100%; height:100%; overflow:visible; --knock:#fff; }
@media (max-width:1100px){ .ind-watermark{ display:none; } }