/* ============================================================
   IDENTITÉ DE CHAQUE PÔLE
   Chaque palette est construite à partir des couleurs du logo officiel du pôle.
   --p-1 / --p-2   : début et fin du dégradé du logo
   --p-grad        : dégradé décoratif (traits, barres, bandeaux)
   --p-grad-btn    : dégradé des boutons principaux (choisi pour rester lisible)
   --p-texte       : couleur du texte posé sur ce dégradé (contraste AA vérifié)
   --p-pale        : teinte très claire (fonds de sélection)
   --p-fonce       : version foncée pour les liens et petits textes
   --band1 à 4     : bandeaux décoratifs de la page d'accueil du pôle
   ============================================================ */

/* GIP FIPAN — accueil général (bandeau turquoise du logo) */
body[data-pole="gip"]{
  --p-1:#00AAB0; --p-2:#62C2D8;
  --p-grad:linear-gradient(90deg,#00AAB0,#62C2D8);
  --p-grad-btn:linear-gradient(90deg,#00AAB0,#62C2D8); --p-texte:#1d1d1b;
  --p-pale:#00AAB01A; --p-fonce:#00666A;
  --band1:#00AAB0CC; --band2:#62C2D8B3; --band3:#00AAB066; --band4:#62C2D880;
}
/* CFA — dégradé rose → orange du logo CFA (identique à la démo d'origine) */
body[data-pole="cfa"]{
  --p-1:#E3696C; --p-2:#F1900A;
  --p-grad:linear-gradient(90deg,#E3696C,#F1900A);
  --p-grad-btn:linear-gradient(90deg,#E3696C,#F1900A); --p-texte:#1d1d1b;
  --p-pale:#E3696C1C; --p-fonce:#9E3B3E;
  --band1:#FBAE40D9; --band2:#E369DABF; --band3:#62BAEAC7; --band4:#F26B43B3;
}
/* DAVA — dégradé bleu nuit → bleu du logo DAVA */
body[data-pole="dava"]{
  --p-1:#203F81; --p-2:#407ABA;
  --p-grad:linear-gradient(90deg,#203F81,#407ABA);
  --p-grad-btn:linear-gradient(90deg,#203F81,#3668A9); --p-texte:#ffffff;
  --p-pale:#407ABA1F; --p-fonce:#203F81;
  --band1:#203F81D9; --band2:#407ABAB3; --band3:#62C2D8B3; --band4:#3668A980;
}
/* GRETA — dégradé vert → turquoise du logo GRETA */
body[data-pole="greta"]{
  --p-1:#1BA553; --p-2:#00A8AD;
  --p-grad:linear-gradient(90deg,#1BA553,#00A8AD);
  --p-grad-btn:linear-gradient(90deg,#1BA553,#00A8AD); --p-texte:#1d1d1b;
  --p-pale:#1BA5531C; --p-fonce:#0E6B34;
  --band1:#1BA553CC; --band2:#00A8ADB3; --band3:#62C2D8B3; --band4:#0FA67B99;
}
/* BILANS — dégradé violet → bleu du logo BILANS */
body[data-pole="bilans"]{
  --p-1:#83328A; --p-2:#468BCA;
  --p-grad:linear-gradient(90deg,#83328A,#468BCA);
  --p-grad-btn:linear-gradient(90deg,#83328A,#5D6AB2); --p-texte:#ffffff;
  --p-pale:#83328A17; --p-fonce:#6A2870;
  --band1:#83328AC7; --band2:#6957A5B3; --band3:#468BCAB3; --band4:#62C2D899;
}

/* ============================================================
   LOGOS OFFICIELS — affichés sans modification.
   Les fichiers PNG ont une marge transparente autour du dessin :
   le cadre ci-dessous la masque à l'affichage (le fichier reste intact).
   --h = hauteur visible du logo.
   ============================================================ */
.logo-cadre{display:inline-block;overflow:hidden;line-height:0;--h:42px;--s:calc(var(--h) / 161)}
.logo-cadre img{display:block;height:calc(var(--s) * 260);width:auto;max-width:none;margin:calc(var(--s) * -66) calc(var(--s) * -66) calc(var(--s) * -33) calc(var(--s) * -65)}
.logo-cadre.gip img{margin:calc(var(--s) * -66) calc(var(--s) * -67) calc(var(--s) * -33) calc(var(--s) * -67)}
@media(max-width:420px){.barre .logo-cadre{--h:34px}}
@media(max-width:370px){.barre .logo-cadre{--h:30px}}

/* ============================================================
   BARRE « ÉCOSYSTÈME » — présente sur toutes les pages :
   retour à l'accueil GIP FIPAN + accès direct aux 4 pôles
   ============================================================ */
.ecosysteme{background:var(--encre);color:#fff;font-size:.8rem}
.ecosysteme .interieur{max-width:920px;margin:0 auto;padding:0 16px;display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.ecosysteme .interieur::-webkit-scrollbar{display:none}
.ecosysteme a{color:#fff;text-decoration:none;padding:7px 10px;white-space:nowrap;border-bottom:3px solid transparent;opacity:.85}
.ecosysteme a:hover{opacity:1}
.ecosysteme a[aria-current="page"]{opacity:1;font-weight:700;border-bottom-color:var(--pc,#62C2D8)}
.ecosysteme .accueil-gip{font-weight:700;opacity:1;padding-left:0;margin-right:auto}
.ecosysteme .sep{display:none}
.ecosysteme a[data-lien="cfa"]{--pc:#F1900A} .ecosysteme a[data-lien="dava"]{--pc:#407ABA}
.ecosysteme a[data-lien="greta"]{--pc:#1BA553} .ecosysteme a[data-lien="bilans"]{--pc:#6957A5}
@media(max-width:560px){.ecosysteme .libelle-long{display:none}}

/* Sur l'accueil GIP, on masque les outils propres aux pôles */
body[data-pole="gip"] .seulement-pole{display:none!important}
body:not([data-pole="gip"]) .seulement-gip{display:none!important}
.badge-maquette{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:12px;background:var(--jaune);color:var(--encre)}

/* ============================================================
   ACCUEIL INSTITUTIONNEL GIP FIPAN
   ============================================================ */
.gip-hero{position:relative;margin:28px 0 8px;padding:44px 36px;border-radius:24px;background:var(--blanc);border:1px solid var(--bord);overflow:hidden}
.gip-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:linear-gradient(90deg,#E3696C 0 25%,#203F81 25% 50%,#1BA553 50% 75%,#83328A 75% 100%)}
.gip-hero .halo{position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#62C2D840,#00AAB000 70%)}
.gip-hero .sur{font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--p-fonce);margin-bottom:14px;position:relative}
.gip-hero h1{font-size:2.3rem;font-weight:800;line-height:1.15;max-width:640px;position:relative}
.gip-hero h1 .accent{background:var(--p-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.gip-hero p.intro{font-size:1.08rem;color:var(--gris);max-width:600px;margin:16px 0 26px;position:relative}
.gip-hero .actions{display:flex;gap:10px;flex-wrap:wrap;position:relative}
@media(max-width:640px){.gip-hero{padding:30px 22px}.gip-hero h1{font-size:1.7rem}}

.titre-section{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:40px 0 16px}
.titre-section h2{font-size:1.45rem;font-weight:800}
.titre-section p{color:var(--gris);font-size:.95rem}

.grille-poles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:720px){.grille-poles{grid-template-columns:1fr}}
.carte-pole{position:relative;background:var(--blanc);border:1px solid var(--bord);border-radius:20px;padding:26px 24px 22px;display:flex;flex-direction:column;gap:12px;transition:transform .18s ease,box-shadow .18s ease;overflow:hidden}
.carte-pole::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--cg)}
.carte-pole:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.carte-pole .lien-logo{display:inline-block;align-self:flex-start;border-radius:10px;padding:4px}
.carte-pole .lien-logo .logo-cadre{--h:52px}
.carte-pole h3{font-size:1.05rem;font-weight:700}
.carte-pole p{font-size:.92rem;color:var(--gris)}
.carte-pole .public{font-size:.82rem;color:var(--encre);background:var(--fond);border-radius:10px;padding:8px 12px}
.carte-pole .pied-carte{margin-top:auto;padding-top:8px}
.carte-pole .badge-maquette{position:absolute;top:16px;right:16px}
@media(max-width:420px){.carte-pole .badge-maquette{position:static;align-self:flex-start;order:-1}}
.carte-pole .acceder{font-weight:700;font-size:.9rem;text-decoration:none;color:var(--encre);background:var(--cgb);color:var(--ct);padding:10px 16px;border-radius:12px;display:inline-flex;gap:8px;align-items:center}
.carte-pole .acceder:hover{filter:brightness(1.06)}
.cp-cfa{--cg:linear-gradient(180deg,#E3696C,#F1900A);--cgb:linear-gradient(90deg,#E3696C,#F1900A);--ct:#1d1d1b}
.cp-dava{--cg:linear-gradient(180deg,#203F81,#407ABA);--cgb:linear-gradient(90deg,#203F81,#3668A9);--ct:#fff}
.cp-greta{--cg:linear-gradient(180deg,#1BA553,#00A8AD);--cgb:linear-gradient(90deg,#1BA553,#00A8AD);--ct:#1d1d1b}
.cp-bilans{--cg:linear-gradient(180deg,#83328A,#468BCA);--cgb:linear-gradient(90deg,#83328A,#5D6AB2);--ct:#fff}

.valeurs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:720px){.valeurs{grid-template-columns:1fr}}
.valeur{background:var(--blanc);border:1px solid var(--bord);border-radius:18px;padding:22px}
.valeur .pastille{width:42px;height:42px;border-radius:12px;background:var(--p-pale);display:flex;align-items:center;justify-content:center;font-size:1.25rem;margin-bottom:12px}
.valeur h3{font-size:1rem;margin-bottom:6px}
.valeur p{font-size:.9rem;color:var(--gris)}
.bandeau-contact{margin:40px 0 0;border-radius:20px;padding:26px;background:var(--p-pale);border:1px solid #00AAB040;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.bandeau-contact h2{font-size:1.15rem}
.bandeau-contact p{font-size:.92rem;color:var(--gris)}
.note-validation{font-size:.78rem;color:var(--gris-doux);margin-top:14px}

/* Liens présentés comme des boutons ; titres qui reçoivent le focus à l'arrivée sur une page */
a.btn{text-decoration:none}
[tabindex="-1"]:focus{outline:none}

/* ============================================================
   BANDEAUX D'ACCUEIL AVEC VISUEL (accueil GIP et espaces des pôles)
   Visuels officiels choisis dans l'administration. Composition :
   - texte à gauche, centré verticalement, avec un halo léger de la couleur du pôle ;
   - visuel à droite, découpé en arc ; un liseré au dégradé du pôle suit la courbe ;
   - filet coloré en bas du bandeau (dégradé du pôle, ou les 4 couleurs pour le GIP) ;
   - sur téléphone : visuel au-dessus du texte, arc vers le bas.
   Sans visuel, les bandeaux d'origine s'affichent à l'identique.
   ============================================================ */

/* ---------- Espace d'un pôle (classe ajoutée par js/app.js) ---------- */
.hero.hero-avec-visuel{grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:340px;border-radius:24px}
.hero.hero-avec-visuel::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5px;background:var(--p-grad);z-index:3}
.hero.hero-avec-visuel .hero-texte{align-self:center;padding:40px 14px 46px 36px}
.hero.hero-avec-visuel .hero-texte::before{content:"";position:absolute;left:-110px;bottom:-130px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,var(--p-pale),transparent 70%);z-index:-1;pointer-events:none}
.hero.hero-avec-visuel h1{font-size:2rem;line-height:1.15;letter-spacing:-.01em}
.hero.hero-avec-visuel p{font-size:1.04rem}
.hero.hero-avec-visuel .hero-visuel{min-height:100%}
.hero.hero-avec-visuel .bandeau{display:none}
.hero.hero-avec-visuel .hero-visuel::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--p-1),var(--p-2));clip-path:ellipse(100% 92% at 100% 50%)}
.hero.hero-avec-visuel .hero-visuel img{clip-path:ellipse(calc(100% - 9px) 92% at 100% 50%)}

/* ---------- Accueil GIP FIPAN ---------- */
.gip-hero.avec-image{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);padding:0;min-height:470px}
.gip-hero.avec-image .gip-hero-texte{align-self:center;padding:48px 16px 56px 40px;position:relative;z-index:1}
.gip-hero.avec-image .gip-hero-texte::before{content:"";position:absolute;left:-140px;bottom:-170px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,#62C2D833,#00AAB000 70%);z-index:-1;pointer-events:none}
.gip-hero.avec-image h1{font-size:2.15rem}
.gip-hero-image{position:relative;min-height:100%}
.gip-hero-image::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#E3696C 0%,#203F81 38%,#1BA553 70%,#83328A 100%);clip-path:ellipse(100% 88% at 100% 50%)}
.gip-hero-image img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;clip-path:ellipse(calc(100% - 10px) 88% at 100% 50%)}
.gip-hero.avec-image::after{z-index:2}

/* ---------- Tablette ---------- */
@media(max-width:960px){
  .hero.hero-avec-visuel{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
  .hero.hero-avec-visuel .hero-texte{padding:32px 10px 38px 28px}
  .hero.hero-avec-visuel h1{font-size:1.7rem}
  .gip-hero.avec-image{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);min-height:420px}
  .gip-hero.avec-image .gip-hero-texte{padding:40px 12px 46px 30px}
  .gip-hero.avec-image h1{font-size:1.85rem}
}

/* ---------- Téléphone : visuel au-dessus du texte ---------- */
@media(max-width:640px){
  .hero.hero-avec-visuel{grid-template-columns:1fr;min-height:0}
  .hero.hero-avec-visuel .hero-visuel{min-height:0;aspect-ratio:16/10;order:-1}
  .hero.hero-avec-visuel .hero-visuel::before{background:var(--p-grad);clip-path:ellipse(115% 100% at 50% 0)}
  .hero.hero-avec-visuel .hero-visuel img{clip-path:ellipse(115% calc(100% - 8px) at 50% 0)}
  .hero.hero-avec-visuel .hero-texte{padding:20px 22px 30px}
  .hero.hero-avec-visuel .hero-texte::before{display:none}
  .hero.hero-avec-visuel h1{font-size:1.55rem}
  .gip-hero.avec-image{grid-template-columns:1fr;min-height:0}
  .gip-hero-image{order:-1;aspect-ratio:16/10;min-height:0}
  .gip-hero-image::before{background:linear-gradient(90deg,#E3696C 0%,#203F81 38%,#1BA553 70%,#83328A 100%);clip-path:ellipse(115% 100% at 50% 0)}
  .gip-hero-image img{clip-path:ellipse(115% calc(100% - 8px) at 50% 0)}
  .gip-hero.avec-image .gip-hero-texte{padding:22px 22px 34px}
  .gip-hero.avec-image .gip-hero-texte::before{display:none}
  .gip-hero.avec-image h1{font-size:1.7rem}
}

/* Pied de page : liens vers les pages d'information (mentions légales, confidentialité) */
.pied nav a{color:var(--gris);font-size:.82rem;text-decoration:underline}
.pied nav a[aria-current="page"]{font-weight:700}