/* ─────────────────────────────────────────────────────────────────────────────
   Page des financements structures montes avec SGC Investment Group.
   Reprend les jetons de homepage.css et la meme echelle que la page d'accueil.
   Charte : #072890, #051c66, #e30613, et rien d'autre en couleur de marque.
   ───────────────────────────────────────────────────────────────────────────── */

/* `structure.css` pose un `outline: none !important` global au site : seul un
   `!important` rend le focus visible sur cette page. */
.ins-hero a:focus-visible {
    outline: 2px solid #ffffff !important;
    outline-offset: 2px;
}

.ins-section a:focus-visible,
.ins-section button:focus-visible,
.ins-section input:focus-visible,
.ins-section select:focus-visible {
    outline: 2px solid var(--app-them, #072890) !important;
    outline-offset: 2px;
}

/* ─── Surtitres ─────────────────────────────────────────────────────────────── */
.ins-surtitre {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--app-them, #072890);
}

.ins-surtitre-filet {
    flex: none;
    width: 30px;
    height: 2px;
    background: var(--app-them, #072890);
}

.ins-surtitre--clair {
    color: rgba(238, 241, 250, .86);
}

.ins-surtitre--clair .ins-surtitre-filet {
    background: var(--app-second-them, #e30613);
}

/* ─── Boutons ───────────────────────────────────────────────────────────────── */
.ins-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 56px;
    padding: 0 28px;
    border: 0;
    font-family: inherit;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, box-shadow .2s, color .2s;
}

.ins-btn--pilule { border-radius: 9999px; }

.ins-btn--blanc { background: #ffffff; color: var(--app-them, #072890); }
.ins-btn--blanc:hover,
.ins-btn--blanc:focus { background: #eef1f9; color: var(--app-them, #072890); }

.ins-btn--plein { background: var(--app-them, #072890); color: #ffffff; }
.ins-btn--plein:hover,
.ins-btn--plein:focus { background: var(--app-primary-dark, #051c66); color: #ffffff; }
.ins-btn--plein[disabled] { opacity: .6; cursor: default; }

.ins-btn--contour {
    background: transparent;
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .34);
}
.ins-btn--contour:hover,
.ins-btn--contour:focus { background: rgba(255, 255, 255, .08); color: #ffffff; }

/* ─── Bandeau d'ouverture ───────────────────────────────────────────────────── */
.ins-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 78px;
    background: var(--app-primary-dark, #051c66);
    color: #eef1f9;
}


.ins-hero > .container { position: relative; z-index: 1; }

.ins-hero-grille {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: center;
}

.ins-hero-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 22px;
}

.ins-hero h1 {
    margin: 0;
    font-size: clamp(30px, 3.4vw, 46px);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

/* Un bleu clair serait illisible sur ce fond : la sous-ligne reste claire. */
.ins-hero-sous {
    margin: 0;
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.4;
    font-weight: 500;
    color: rgba(255, 255, 255, .92);
}

.ins-hero-intro {
    margin: 0;
    max-width: 520px;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(238, 241, 250, .82);
}

.ins-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 2px; }

/* Le conteneur est ramene a la largeur de la photo et pousse a droite. Sans
   cela il restait plus large qu'elle, et la nappe ci-dessous, centree sur le
   conteneur, tombait 38px a gauche du sujet sur grand ecran. */
.ins-hero-visuel {
    position: relative;
    display: flex;
    justify-content: flex-end;
    width: 100%;
    max-width: 540px;
    margin-left: auto;
}

/* La photo est detouree : sur du bleu nuit plat, le sujet parait colle. Cette
   nappe claire est accrochee a la PHOTO et non au bandeau, donc elle la suit a
   toutes les largeurs au lieu de deriver. Elle s'eteint jusqu'au bord, sans
   arret net : un degrade qui s'arretait avant le bord dessinait un arc de
   cercle visible en travers du bandeau. */
.ins-hero-visuel::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 128%;
    aspect-ratio: 1;
    background: radial-gradient(closest-side, rgba(238, 241, 250, .15), rgba(238, 241, 250, .06) 52%, rgba(238, 241, 250, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.ins-hero-visuel picture { position: relative; z-index: 1; display: block; width: 100%; max-width: 540px; }

/* Le bas de la photo se fond dans le bandeau : sans cela, le detourage se
   terminait par un bord net en travers du plan de travail. */
.ins-hero-visuel img {
    display: block;
    width: 100%;
    height: auto;
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 12%);
            mask-image: linear-gradient(to top, transparent 0, #000 12%);
}

/* ─── Sections ──────────────────────────────────────────────────────────────── */
.ins-section { padding: 86px 0; background: var(--pf-surface, #ffffff); }
.ins-section--alt { background: var(--pf-surface-alt, #f4f6fc); }

.ins-bloc-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}


.ins-bloc-texte h2 {
    margin: 0;
    font-size: clamp(24px, 2.7vw, 34px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pf-text, #1f2742);
}

.ins-intro {
    margin: 0;
    font-size: 16px;
    line-height: 1.68;
    color: var(--pf-text-secondary, #565e7d);
}

.ins-grille-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: start;
}

/* ─── Roles du partenariat ──────────────────────────────────────────────────── */
.ins-roles {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ins-roles li {
    display: flex;
    gap: 18px;
    padding: 26px;
    border-radius: 20px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 1px 2px rgba(7, 40, 144, .06), 0 16px 40px rgba(7, 40, 144, .08);
}

.ins-roles li.ins-role--gris { background: var(--pf-surface-alt, #f4f6fc); box-shadow: none; }
.ins-roles li.ins-role--gris .ins-role-icone { background: #ffffff; color: var(--app-second-them, #e30613); }

.ins-role-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eaf0fb;
    color: var(--app-them, #072890);
    font-size: 17px;
}

.ins-roles li > span:last-child { display: flex; flex-direction: column; gap: 5px; }
.ins-roles strong { font-size: 16px; font-weight: 700; color: var(--pf-text, #1f2742); }
.ins-roles li span span { font-size: 14.5px; line-height: 1.55; color: var(--pf-text-secondary, #565e7d); }

/* ─── Nos metiers institutionnels ───────────────────────────────────────────── */
/* Meme presentation que « Ce que nous proposons » sur l'accueil. Les styles y
   sont transposes et non reutilises : `accueil.css` n'est pas charge ici. */
.ins-entete-ligne {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px 40px;
    margin-bottom: 40px;
}

/* Les deux blocs ont une base VOLONTAIREMENT courte. Avec une base automatique,
   le navigateur dimensionnait les outils sur la largeur naturelle de la barre
   de filtres, pres de 700px, avant que son propre defilement n'entre en jeu :
   la somme depassait le conteneur des 1200px et les outils basculaient sous le
   titre. Avec des bases courtes, ils restent sur la ligne et se partagent la
   place restante. */
.ins-entete-ligne > .ins-bloc-texte { flex: 1 1 340px; max-width: 640px; }

.ins-entete-outils {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1 1 240px;
    gap: 12px;
    min-width: 0;
}

/* `min-width: 0` sans quoi la barre, element de flex, refuse de se retrecir
   sous la largeur de ses pilules et pousse le titre hors du conteneur. */
.ins-filtres {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 6px;
    max-width: 100%;
    min-width: 0;
    border-radius: 9999px;
    /* Blanc et non gris clair : la section porte deja ce gris en fond, la
       barre s'y confondrait exactement. */
    background: var(--pf-surface-card, #ffffff);
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.ins-filtres[hidden] { display: none; }

.ins-filtres button {
    flex: none;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 500;
    white-space: nowrap;
    color: var(--pf-text-secondary, #565e7d);
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.ins-filtres button:hover { color: var(--app-them, #072890); }

.ins-filtres button[aria-pressed="true"] {
    background: var(--app-them, #072890);
    color: #ffffff;
    font-weight: 700;
}

.ins-fleches { display: flex; gap: 8px; }
.ins-fleches[hidden] { display: none; }

.ins-fleche {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0);
    color: var(--app-them, #072890);
    cursor: pointer;
}

.ins-fleche:disabled { opacity: .35; cursor: default; }

/* Une piste qui defile plutot qu'une grille : la section tient sur une seule
   rangee quel que soit le nombre d'offres publiees. */
.ins-piste {
    --visibles: 4;
    display: flex;
    gap: 24px;
    padding-bottom: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.ins-piste::-webkit-scrollbar { display: none; }

.ins-piste > .ins-service {
    flex: 0 0 calc((100% - (var(--visibles) - 1) * 24px) / var(--visibles));
    scroll-snap-align: start;
}

.ins-piste > .ins-message { flex: 1 1 100%; }

.ins-service {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 1px 2px rgba(7, 40, 144, .06), 0 16px 40px rgba(7, 40, 144, .08);
}

/* L'image vient de la base, propre a chaque offre */
.ins-service-image {
    height: 158px;
    background: var(--pf-surface-deep, #eef1f9);
}

.ins-service-image img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Offre sans photo : son propre pictogramme, a la meme hauteur d'en-tete */
.ins-service-image--picto {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eaf0fb;
    color: var(--app-them, #072890);
    font-size: 34px;
}

.ins-service-corps {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
    padding: 18px 20px 20px;
}

/* Les reperes restent dans le corps : rien n'est pose sur l'image */
.ins-etiquettes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.ins-etiquette {
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--pf-surface-deep, #eef1f9);
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--app-them, #072890);
}

.ins-etiquette--neutre {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0);
    color: var(--pf-text-secondary, #565e7d);
}

.ins-service h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.015em;
    color: var(--pf-text, #1f2742);
}

.ins-service p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--pf-text-secondary, #565e7d);
}

/* Aucune offre institutionnelle n'a de tarif en base : ce sont ces marqueurs,
   saisis avec l'offre, qui remplissent la carte. */
.ins-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }

.ins-tags li {
    padding: 6px 11px;
    border-radius: 9999px;
    background: var(--pf-surface-alt, #f4f6fc);
    font-size: 12.5px;
    color: var(--pf-text-secondary, #565e7d);
}

.ins-lien {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--app-them, #072890);
    text-decoration: none;
}

.ins-lien:hover { color: var(--app-primary-light, #0a3ab8); }
.ins-lien i { font-size: 12px; }

/* Complement de libelle reserve aux lecteurs d'ecran */
.ins-masque {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* La carte d'appel ferme la piste */
.ins-service--appel { background: var(--app-them, #072890); box-shadow: none; }
.ins-service--appel .ins-service-corps { justify-content: center; gap: 14px; padding: 30px; }
.ins-service--appel h3 { font-size: 18px; font-weight: 700; color: #ffffff; }
.ins-service--appel p { font-size: 14.5px; color: rgba(238, 241, 250, .84); }
.ins-service--appel .ins-btn { align-self: flex-start; min-height: 48px; padding: 0 22px; font-size: 15px; }

.ins-message {
    margin: 0;
    padding: 22px 24px;
    border-radius: 16px;
    background: var(--pf-surface-card, #ffffff);
    font-size: 15px;
    line-height: 1.6;
    color: var(--pf-text-secondary, #565e7d);
}

.ins-message[hidden] { display: none; }

/* ─── Parcours, de la soumission au closing ─────────────────────────────────── */
/* Meme mise en page que la section « Nos atouts » de l'accueil : les reperes a
   gauche, le portrait en medaillon a droite, et aucun bouton. */
.ins-parcours-grille {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 56px;
    align-items: center;
}

.ins-parcours-bloc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

/* Le titre se lit sur deux tons, la seconde moitie portant le bleu de marque */
.ins-titre-parcours {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--pf-text, #1f2742);
}

.ins-titre-parcours span { color: var(--app-them, #072890); }

.ins-parcours-bloc .ins-intro { max-width: 480px; }

/* Quatre reperes en deux colonnes : en une seule ligne comme a l'accueil, qui
   n'en porte que trois, les libelles se seraient ecrases. */
.ins-parcours {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 30px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.ins-parcours > li { display: flex; align-items: flex-start; gap: 12px; }

.ins-parcours-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eaf0fb;
    color: var(--app-them, #072890);
    font-size: 17px;
    backface-visibility: hidden;
    transition: transform .45s cubic-bezier(.22, .68, .24, 1);
}

/* Le pictogramme pivote quand on survole son repere. Il est enfant du `li`
   anime : la transformation figee du parent n'empeche pas la sienne. */
.ins-parcours > li:hover .ins-parcours-icone {
    transform: perspective(600px) rotateY(-20deg) translateY(-2px);
}

/* Le repere est en bleu de marque : le dore de la maquette d'origine ne fait
   pas partie de la charte. */
.ins-parcours-repere {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--app-them, #072890);
}

.ins-parcours strong {
    display: block;
    margin-top: 3px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pf-text, #1f2742);
}

.ins-parcours .ins-parcours-texte {
    display: block;
    margin-top: 2px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--pf-text-secondary, #565e7d);
}

.ins-parcours-visuel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 420px;
}

/* Medaillon bleu pale et non rose : tout le reste de la page est bleu */
.ins-parcours-tache {
    position: absolute;
    right: 4%;
    top: 0;
    width: 78%;
    height: 88%;
    background: #eaf0fb;
    border-radius: 56% 44% 48% 52% / 54% 50% 50% 46%;
    pointer-events: none;
}

.ins-parcours-traits { position: absolute; right: 0; top: 12%; pointer-events: none; }

.ins-parcours-visuel picture,
.ins-parcours-visuel img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
}

/* Etiquette posee SOUS le portrait, jamais dessus */
.ins-parcours-badge {
    align-self: flex-end;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 16px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0), 0 16px 40px rgba(7, 40, 144, .14);
    /* Legere inclinaison AU REPOS : c'est elle qui donne le relief. Toute
       animation de cette etiquette doit donc se terminer sur cette valeur
       exacte, jamais sur une transformation neutre, sinon la fin de course
       effacerait le relief. */
    transform: perspective(900px) rotateX(3deg) rotateY(-6deg) rotate(-1deg);
    backface-visibility: hidden;
    transition: transform .5s cubic-bezier(.22, .68, .24, 1), box-shadow .5s cubic-bezier(.22, .68, .24, 1);
}

/* Au survol l'etiquette se redresse et se souleve */
.ins-parcours-badge:hover {
    transform: perspective(900px) rotateX(0deg) rotateY(0deg) rotate(0deg) translateY(-5px);
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0), 0 24px 54px rgba(7, 40, 144, .20);
}

/* Le relief au repos reste ; seuls les mouvements sont neutralises */
@media (prefers-reduced-motion: reduce) {
    .ins-parcours-badge,
    .ins-parcours-icone { transition: none; }
}

.ins-parcours-badge-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    color: var(--app-them, #072890);
    font-size: 20px;
}

.ins-parcours-badge strong {
    display: block;
    margin-top: 0;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pf-text, #1f2742);
}

.ins-parcours-badge > span:last-child > span {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    color: var(--pf-text-secondary, #565e7d);
}

/* ─── Formulaire ────────────────────────────────────────────────────────────── */
.ins-grille-form {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
    gap: 64px;
    align-items: start;
}

.ins-confidentialite {
    display: flex;
    gap: 14px;
    margin: 6px 0 0;
    padding: 20px 22px;
    border-radius: 16px;
    background: var(--pf-surface-alt, #f4f6fc);
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--pf-text-secondary, #565e7d);
}

.ins-confidentialite .ins-role-icone { width: 38px; height: 38px; border-radius: 10px; background: #ffffff; font-size: 15px; }

.ins-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 36px;
    border-radius: 20px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 1px 2px rgba(7, 40, 144, .06), 0 16px 40px rgba(7, 40, 144, .08);
}

.ins-champ { display: flex; flex-direction: column; gap: 8px; }

.ins-champ label,
.ins-champ-titre { font-size: 14px; font-weight: 700; color: var(--pf-text, #1f2742); }

.ins-champs-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.ins-form input,
.ins-form select {
    min-height: 52px;
    width: 100%;
    padding: 0 16px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1.5px var(--pf-border, #dde3f0);
    font-family: inherit;
    font-size: 15px;
    color: var(--pf-text, #1f2742);
}

/* Le gris clair d'origine tombait a 3,04:1 sur blanc : trop pale pour du texte */
.ins-form input::placeholder { color: var(--pf-text-secondary, #565e7d); opacity: 1; }

.ins-types { display: flex; flex-wrap: wrap; gap: 9px; }

.ins-type {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 16px;
    border: 0;
    border-radius: 9999px;
    background: var(--pf-surface-alt, #f4f6fc);
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--pf-text-secondary, #565e7d);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.ins-type[aria-pressed="true"] {
    background: var(--app-them, #072890);
    color: #ffffff;
    font-weight: 700;
}

.ins-flash { margin: 0; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.ins-flash[hidden] { display: none; }
.ins-flash--ok { background: #e8f5ec; color: #1b6b36; }
.ins-flash--erreur { background: #fdeaec; color: #a3050f; }

/* L'adresse directe du Corporate Desk, dans la colonne du formulaire. La bande
   qui la portait auparavant etait du meme bleu nuit que le pied de page et s'y
   confondait, tout en repetant un contact deja present plus bas. */
.ins-contact-direct {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 16px;
    font-weight: 700;
}

.ins-contact-direct i { color: var(--app-them, #072890); font-size: 15px; }
.ins-contact-direct a { color: var(--app-them, #072890); text-decoration: none; white-space: nowrap; }
.ins-contact-direct a:hover { color: var(--app-primary-light, #0a3ab8); text-decoration: underline; }

/* ─── Tablette ──────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
    .ins-hero { padding: 56px 0 60px; }
    .ins-hero-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ins-hero-visuel { justify-content: center; margin: 0 auto; }
    .ins-hero-visuel::before { width: 118%; }

    .ins-section { padding: 64px 0; }
    .ins-grille-2,
    .ins-grille-form { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ins-piste { --visibles: 2; }
    .ins-entete-ligne { align-items: flex-start; margin-bottom: 32px; }

    .ins-parcours-grille { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ins-parcours-visuel { min-height: 0; }

    .ins-parcours-visuel picture,
    .ins-parcours-visuel img { max-width: 420px; }
}

/* ─── Telephone ─────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .ins-hero { padding: 40px 0 44px; }
    .ins-hero-actions { width: 100%; }
    .ins-hero-actions .ins-btn { width: 100%; }

    .ins-section { padding: 52px 0; }
    .ins-piste { --visibles: 1; }
    .ins-service--appel .ins-service-corps { padding: 24px; }
    .ins-roles li { padding: 22px; }

    .ins-parcours { grid-template-columns: minmax(0, 1fr); }

    .ins-form { padding: 24px; }
    .ins-champs-2 { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Entree des sections au defilement ─────────────────────────────────────
   Une section marquee `data-anime` s'anime a son entree dans l'ecran, une
   seule fois. Le masquage initial est pose par le script, JAMAIS par le CSS :
   sans JavaScript, ou si le navigateur ne sait pas observer, la page reste
   entierement visible. Le tout est enferme dans `no-preference` : quelqu'un
   qui a demande moins d'animations ne voit jamais un element masque.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @keyframes ins-monte {
        from { opacity: 0; transform: translateY(16px); }
        to   { opacity: 1; transform: none; }
    }

    @keyframes ins-monte-ample {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: none; }
    }

    /* Le bandeau est au-dessus de la ligne de flottaison : il joue au
       chargement, pas a l'entree dans l'ecran, qui serait deja passee. */
    .ins-hero .ins-surtitre { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) both; }
    .ins-hero h1 { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .08s both; }
    .ins-hero-sous { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .15s both; }
    .ins-hero-intro { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .21s both; }
    .ins-hero-actions { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .28s both; }
    .ins-hero-visuel { animation: ins-monte-ample .8s cubic-bezier(.2, .7, .3, 1) .16s both; }

    [data-anime].ins-anim-prete .ins-surtitre,
    [data-anime].ins-anim-prete h2,
    [data-anime].ins-anim-prete .ins-intro,
    [data-anime].ins-anim-prete .ins-roles li,
    [data-anime].ins-anim-prete .ins-entete-outils,
    [data-anime].ins-anim-prete .ins-piste,
    [data-anime].ins-anim-prete .ins-parcours li,
    [data-anime].ins-anim-prete .ins-parcours-tache,
    [data-anime].ins-anim-prete .ins-parcours-visuel picture,
    [data-anime].ins-anim-prete .ins-parcours-traits,
    [data-anime].ins-anim-prete .ins-parcours-badge,
    [data-anime].ins-anim-prete .ins-confidentialite,
    [data-anime].ins-anim-prete .ins-contact-direct,
    [data-anime].ins-anim-prete .ins-form {
        opacity: 0;
    }

    [data-anime].ins-vu .ins-surtitre { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) both; }
    [data-anime].ins-vu h2 { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .08s both; }
    [data-anime].ins-vu .ins-intro { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .14s both; }

    /* Gouvernance : les trois roles arrivent l'un apres l'autre */
    [data-anime].ins-vu .ins-roles li { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) both; }
    [data-anime].ins-vu .ins-roles li:nth-child(1) { animation-delay: .20s; }
    [data-anime].ins-vu .ins-roles li:nth-child(2) { animation-delay: .26s; }
    [data-anime].ins-vu .ins-roles li:nth-child(3) { animation-delay: .32s; }

    /* Metiers : les outils, puis la piste de cartes */
    [data-anime].ins-vu .ins-entete-outils { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .18s both; }
    [data-anime].ins-vu .ins-piste { animation: ins-monte-ample .6s cubic-bezier(.2, .7, .3, 1) .24s both; }

    /* Parcours : les quatre reperes, puis le medaillon s'ouvre derriere le
       portrait, qui arrive ensuite, les traits et la pastille en dernier */
    /* ── Relief de la bande parcours ─────────────────────────────────────
       Chaque element porte sa propre `perspective()` dans sa transformation.
       Posee sur la grille, elle changerait le contexte d'empilement de toute
       la section, medaillon et portrait compris. */
    @keyframes ins-bascule {
        from { opacity: 0; transform: perspective(900px) translateY(18px) rotateX(-16deg); }
        to   { opacity: 1; transform: perspective(900px) translateY(0) rotateX(0deg); }
    }

    @keyframes ins-ouvre-medaillon {
        from { opacity: 0; transform: perspective(1100px) scale(.88) rotateY(10deg); }
        to   { opacity: 1; transform: perspective(1100px) scale(1) rotateY(0deg); }
    }

    /* Le portrait avance vers le lecteur depuis l'arriere-plan */
    @keyframes ins-avance-portrait {
        from { opacity: 0; transform: perspective(1100px) translateY(26px) translateZ(-70px) rotateY(-9deg); }
        to   { opacity: 1; transform: perspective(1100px) translateY(0) translateZ(0) rotateY(0deg); }
    }

    /* Se termine sur l'inclinaison AU REPOS de l'etiquette */
    @keyframes ins-pose-etiquette {
        from {
            opacity: 0;
            transform: perspective(900px) translateY(24px) rotateX(14deg) rotateY(-18deg) rotate(-3deg) scale(.96);
        }
        to {
            opacity: 1;
            transform: perspective(900px) rotateX(3deg) rotateY(-6deg) rotate(-1deg) scale(1);
        }
    }

    [data-anime] .ins-parcours li,
    [data-anime] .ins-parcours-visuel picture,
    [data-anime] .ins-parcours-tache { backface-visibility: hidden; }

    [data-anime].ins-vu .ins-parcours li { animation: ins-bascule .75s cubic-bezier(.22, .68, .24, 1) both; }
    [data-anime].ins-vu .ins-parcours li:nth-child(1) { animation-delay: .18s; }
    [data-anime].ins-vu .ins-parcours li:nth-child(2) { animation-delay: .26s; }
    [data-anime].ins-vu .ins-parcours li:nth-child(3) { animation-delay: .34s; }
    [data-anime].ins-vu .ins-parcours li:nth-child(4) { animation-delay: .42s; }

    [data-anime].ins-vu .ins-parcours-tache { animation: ins-ouvre-medaillon 1s cubic-bezier(.22, .68, .24, 1) .08s both; }
    [data-anime].ins-vu .ins-parcours-visuel picture { animation: ins-avance-portrait .95s cubic-bezier(.22, .68, .24, 1) .24s both; }
    [data-anime].ins-vu .ins-parcours-traits { animation: ins-monte .6s cubic-bezier(.22, .68, .24, 1) .52s both; }

    /* `backwards` et NON `both` : l'etiquette doit rendre la main a sa regle de
       repos une fois posee. Avec `both`, la transformation reste figee par
       l'animation et le survol n'a plus aucun effet. L'opacite finale est donc
       rendue ici, faute de quoi le masquage initial reprendrait le dessus. */
    [data-anime].ins-vu .ins-parcours-badge {
        opacity: 1;
        animation: ins-pose-etiquette .85s cubic-bezier(.22, .68, .24, 1) .58s backwards;
    }

    /* Formulaire */
    [data-anime].ins-vu .ins-form { animation: ins-monte-ample .6s cubic-bezier(.2, .7, .3, 1) .18s both; }
    [data-anime].ins-vu .ins-confidentialite { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .22s both; }
    [data-anime].ins-vu .ins-contact-direct { animation: ins-monte .5s cubic-bezier(.2, .7, .3, 1) .28s both; }
}