/* Infra Society, feuille de style du site et de l'espace membre.
   Langage : le plan technique. Aucun angle arrondi. Des filets fins, des grilles, des repères d'angle comme
   sur un tirage d'architecte, des cartouches. Les dégradés granuleux des carrousels, nos gravures, ECTO.
   Règles de marque : Inter seule, pas d'emoji, pas de tiret long, pas de chasse fixe hors code, pas d'aplat noir,
   pas d'arrondi (seuls ECTO et les badges-tampons sont ronds, parce que ce sont des objets, pas des blocs). */

:root {
  --papier: #fff; --doux: #f5f4f0; --encre: #16171a; --gris: #62636a; --filet: #e3e1db; --filet-fort: #cfccc4;
  --orange: #ff6a00; --orange-t: #d94a00; --orange-clair: #fff0e5;
  --vert: #00b368; --vert-t: #00804f; --vert-clair: #e3f8ee;
  --bleu: #2d3bff;
  --sans: "Inter", Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --gout: 16px; --entete: 72px;
  --large: 1680px; --texte: 760px;
}
@media (min-width: 700px) { :root { --gout: 32px; } }
@media (min-width: 1200px) { :root { --gout: 4vw; } }

*, *::before, *::after { box-sizing: border-box; border-radius: 0; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 17px/1.6 var(--sans);
       -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
img, video, svg { max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; font-weight: 700; text-wrap: balance; }
strong { font-weight: 600; }
.saut { position: absolute; left: -999px; }
.saut:focus { left: 12px; top: 12px; z-index: 99; background: var(--papier); padding: 8px 12px; }
.large { width: min(100% - 2 * var(--gout), var(--large)); margin-inline: auto; }
.etroit { width: min(100% - 2 * var(--gout), var(--texte)); margin-inline: auto; }

/* ------------------------------------------------------------------ typographie */
.t1 { font-size: clamp(46px, 7vw, 124px); line-height: .93; letter-spacing: -.055em; font-weight: 700; }
.t2 { font-size: clamp(34px, 4.4vw, 72px); line-height: .98; letter-spacing: -.045em; font-weight: 700; }
.t3 { font-size: clamp(21px, 1.7vw, 28px); line-height: 1.15; letter-spacing: -.025em; font-weight: 600; }
.chapeau { font-size: clamp(18px, 1.35vw, 22px); line-height: 1.5; color: #45464b; max-width: 52ch; }
.gris { color: var(--gris); }
.petit { font-size: 14.5px; line-height: 1.55; }

/* étiquette : un trait orange, du texte en capitales fines */
.sur, .etiquette { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-t); }
.sur::before, .etiquette::before { content: ""; width: 18px; height: 2px; background: currentColor; }
.etiquette.vert { color: var(--vert-t); }
.etiquette.blanc, .panneau .sur { color: #fff; }

/* ------------------------------------------------------------------ repères d'angle (le motif maison) */
.reperes { position: relative; }
.reperes::after { content: ""; position: absolute; inset: -9px; pointer-events: none; z-index: 3; --c: var(--filet-fort);
  background:
    linear-gradient(var(--c), var(--c)) top left / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) top left / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) top right / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) top right / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom left / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom left / 1px 16px no-repeat,
    linear-gradient(var(--c), var(--c)) bottom right / 16px 1px no-repeat, linear-gradient(var(--c), var(--c)) bottom right / 1px 16px no-repeat; }
.reperes.clairs::after { --c: rgba(255, 255, 255, .7); }
.reperes.orange::after { --c: var(--orange); }

/* ------------------------------------------------------------------ boutons : rectangle, flèche dans son carré */
.boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: stretch; min-height: 50px; font: 600 15.5px/1 var(--sans); text-decoration: none; cursor: pointer;
       border: 1px solid transparent; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); }
.btn > span { display: flex; align-items: center; padding: 0 20px; }
.btn > i { display: grid; place-items: center; width: 50px; border-left: 1px solid rgba(255, 255, 255, .35); transition: background .25s var(--ease); }
.btn > i svg { width: 14px; height: 14px; transition: transform .25s var(--ease); }
.btn:hover > i svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn.plein { background: var(--orange); color: #fff; }
.btn.plein:hover > i { background: var(--orange-t); }
.btn.blanc { background: #fff; color: var(--encre); }
.btn.blanc > i { border-left-color: var(--filet); color: var(--orange-t); }
.btn.blanc:hover > i { background: var(--orange); color: #fff; }
.btn.ligne { border-color: var(--filet-fort); color: var(--encre); background: transparent; }
.btn.ligne > i { border-left-color: var(--filet-fort); color: var(--orange-t); }
.btn.ligne:hover { border-color: var(--encre); }
.btn.verre { border-color: rgba(255, 255, 255, .6); color: #fff; background: rgba(255, 255, 255, .08); }
.btn.verre > i { border-left-color: rgba(255, 255, 255, .45); }
.btn.verre:hover { background: rgba(255, 255, 255, .18); }
.btn[aria-disabled="true"] { background: var(--doux); color: var(--gris); border-color: var(--filet); cursor: default; pointer-events: none; }
.btn[aria-disabled="true"] > i { border-left-color: var(--filet); }
.lien { display: inline-flex; align-items: center; gap: 10px; color: var(--orange-t); font-weight: 600; text-decoration: none; }
.lien svg { width: 13px; height: 13px; transition: transform .25s var(--ease); }
.lien:hover svg, a:hover .lien svg { transform: translateX(4px); }

/* ------------------------------------------------------------------ en-tête */
.entete { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .9);
          -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px); border-bottom: 1px solid var(--filet); }
.entete .large { display: flex; align-items: center; gap: 8px; height: var(--entete); }
.entete .logo { display: block; line-height: 0; margin-right: auto; }
.entete .logo img { height: 38px; width: auto; }
.menu { display: none; align-items: stretch; height: 100%; }
.menu a { display: flex; align-items: center; padding: 0 18px; font-size: 15px; font-weight: 500; color: #45464b; text-decoration: none;
          box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.menu a:hover { color: var(--encre); box-shadow: inset 0 -2px 0 var(--filet-fort); }
.menu a[aria-current="page"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--orange); }
.langues { display: none; align-items: center; margin: 0 8px 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .06em; }
.langues a, .langues span { padding: 6px 8px; text-decoration: none; }
.langues a[aria-current="true"] { color: var(--encre); box-shadow: inset 0 -2px 0 var(--orange); }
.langues span { color: var(--gris-2, #a3a4a9); cursor: default; }
.entete .connexion { display: none; min-height: 42px; }
.entete .connexion > span { padding: 0 16px; font-size: 14.5px; }
.burger { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--filet-fort); background: var(--papier); cursor: pointer; }
.burger span { display: block; width: 18px; height: 1.6px; background: var(--encre); box-shadow: 0 -6px 0 var(--encre), 0 6px 0 var(--encre); }
@media (min-width: 1020px) { .menu, .langues, .entete .connexion { display: flex; } .burger { display: none; } }
.tiroir { position: fixed; inset: var(--entete) 0 auto 0; z-index: 49; background: var(--papier); border-bottom: 1px solid var(--filet);
          padding: 8px var(--gout) 24px; display: grid; transform: translateY(-8px); opacity: 0; visibility: hidden;
          transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s; }
.tiroir.ouvert { opacity: 1; transform: none; visibility: visible; transition: opacity .25s var(--ease), transform .25s var(--ease); }
.tiroir a { padding: 14px 0; font-size: 22px; font-weight: 600; letter-spacing: -.02em; text-decoration: none; border-bottom: 1px solid var(--filet); }
.tiroir .btn { margin-top: 18px; font-size: 16px; }
@media (min-width: 1020px) { .tiroir { display: none; } }

/* ------------------------------------------------------------------ panneaux en dégradé, bord à bord */
.panneau { position: relative; overflow: hidden; color: #fff; background: #4a3fe0 center / cover no-repeat; isolation: isolate; }
.panneau .chapeau, .panneau .gris { color: rgba(255, 255, 255, .88); }
.cartouche { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px 7px 10px; background: #fff; color: var(--encre);
             font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.cartouche::before { content: ""; width: 8px; height: 8px; background: var(--orange); }
.cartouche.vert::before { background: var(--vert); }

/* ouverture : texte à gauche, la vitrine à droite */
.ouverture .panneau { min-height: min(88vh, 860px); display: grid; align-items: center; }
.ouverture .interieur { display: grid; gap: 40px; padding-block: clamp(48px, 7vw, 110px); align-items: center; }
@media (min-width: 1020px) { .ouverture .interieur { grid-template-columns: 1.15fr 1fr; gap: 5vw; } }
.ouverture .t1 { margin-top: 24px; max-width: 12ch; }
.ouverture .chapeau { margin-top: 26px; }
.ouverture .boutons { margin-top: 36px; }
.tete-page .panneau { min-height: min(70vh, 660px); display: grid; align-items: center; }
.tete-page .interieur { display: grid; gap: 40px; padding-block: clamp(44px, 6vw, 96px); align-items: center; }
@media (min-width: 1020px) { .tete-page .interieur { grid-template-columns: 1.15fr 1fr; gap: 5vw; } }
.tete-page .t1 { font-size: clamp(44px, 6vw, 104px); margin-top: 22px; max-width: 13ch; }
.tete-page .chapeau { margin-top: 22px; }
.tete-page .boutons { margin-top: 30px; }

/* la vitrine : des gravures du métier qui se relaient, ECTO posé sur le cadre */
.vitrine { position: relative; justify-self: stretch; padding-top: clamp(70px, 7vw, 120px); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vitrine .cadre { position: relative; aspect-ratio: 4 / 3; border: 1px solid rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .06); overflow: hidden; }
.vitrine .cadre .g { position: absolute; inset: 0; background: #fff; opacity: 0; transform: scale(1.06);
        -webkit-mask: var(--m) center / cover no-repeat; mask: var(--m) center / cover no-repeat; transition: opacity 1.4s ease, transform 7s linear; }
.vitrine .cadre .g.actif { opacity: .92; transform: scale(1); }
.vitrine .legende { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .85); }
.vitrine .legende b { font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: 12px; }
.vitrine > svg.ecto-pose { position: absolute; z-index: 2; top: 0; right: 9%; width: clamp(120px, 12vw, 190px); height: auto; color: var(--orange); }
.vitrine.vert > svg.ecto-pose { color: var(--vert); }

/* le fil des dernières sorties, sous ECTO, sur l'accueil */
.fil { position: relative; }
.fil .ecto-grand { display: block; width: clamp(150px, 16vw, 260px); height: auto; margin: 0 auto -18px; color: var(--orange); position: relative; z-index: 2; }
.fil .pile { position: relative; background: #fff; color: var(--encre); min-height: 150px; }
.fil .sortie { position: absolute; inset: 0; display: grid; grid-template-columns: 112px 1fr; gap: 18px; padding: 16px; text-decoration: none;
               opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease), transform .5s var(--ease); pointer-events: none; }
.fil .sortie.actif { opacity: 1; transform: none; pointer-events: auto; }
.fil .sortie img { width: 112px; height: 118px; object-fit: cover; object-position: top; }
.fil .sortie .quoi { display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.fil .sortie .t3 { font-size: clamp(18px, 1.35vw, 22px); }
.fil .barre { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 12.5px; font-weight: 600;
              letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.fil .jauge { flex: 1; height: 1px; background: rgba(255, 255, 255, .35); margin: 0 14px; position: relative; overflow: hidden; }
.fil .jauge i { position: absolute; inset: 0; background: #fff; transform-origin: left; transform: scaleX(0); }
.fil .jauge i.court { animation: jauge var(--duree, 4s) linear forwards; }
@keyframes jauge { to { transform: scaleX(1); } }

/* ------------------------------------------------------------------ sections */
.section { padding-top: clamp(80px, 9vw, 160px); }
.section-tete { display: grid; gap: 16px; max-width: 900px; }
.section-tete .ligne-sur { display: flex; align-items: center; gap: 12px; }
.section-tete .chapeau { margin-top: 4px; }
.section-tete.centre { margin-inline: auto; text-align: center; justify-items: center; }

.n { position: relative; flex-shrink: 0; display: inline-block; width: 38px; height: 33px; color: var(--orange); }
.n svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.n b { position: absolute; left: 53%; top: 61%; transform: translate(-50%, -50%); font: 700 13px/1 var(--sans); color: #fff; }
.n.vert { color: var(--vert); }

/* ------------------------------------------------------------------ grilles à filets : les cartes partagent leurs bords */
.grille { display: grid; margin-top: 48px; border-top: 1px solid var(--filet); border-left: 1px solid var(--filet); }
.grille > * { border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }
@media (min-width: 760px) { .grille.g2 { grid-template-columns: repeat(2, 1fr); } .grille.g3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .grille.g4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 760px) and (max-width: 1199px) { .grille.g4 { grid-template-columns: repeat(2, 1fr); } }
.case { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 2.4vw, 40px); background: var(--papier); text-decoration: none; color: inherit; transition: background .3s var(--ease); }
.case p { color: #4a4b50; }
.case .pied { margin-top: auto; padding-top: 10px; }
a.case:hover { background: var(--doux); }
a.case:hover .gravure i { transform: scale(1.04); }
.case .gravure { margin: calc(-1 * clamp(24px, 2.4vw, 40px)) calc(-1 * clamp(24px, 2.4vw, 40px)) 12px; height: clamp(180px, 15vw, 260px); background: var(--orange-clair); position: relative; overflow: hidden; border-bottom: 1px solid var(--filet); }
.case .gravure i { position: absolute; inset: -4%; background-color: var(--orange); -webkit-mask: var(--m) center / cover no-repeat; mask: var(--m) center / cover no-repeat; transition: transform .9s var(--ease); }
.case .gravure.vert { background: var(--vert-clair); } .case .gravure.vert i { background-color: var(--vert); }
.case .indice { position: absolute; top: 14px; right: 16px; font-size: 12px; font-weight: 600; letter-spacing: .08em; color: var(--gris); }
.case.grande { grid-column: span 1; }
@media (min-width: 1200px) { .grille.g4 .case.grande { grid-column: span 2; } }
.case.degrade { color: #fff; background: center / cover no-repeat; }
.case.degrade p { color: rgba(255, 255, 255, .9); }
.case.degrade .etiquette { color: #fff; }

/* astuce, glissée entre deux blocs */
.astuces { display: grid; gap: 0; margin-top: 56px; border: 1px solid var(--filet); }
@media (min-width: 900px) { .astuces { grid-template-columns: auto repeat(3, 1fr); } }
.astuces .tete-astuce { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px; background: var(--vert-clair); }
.astuces .tete-astuce svg { width: 54px; color: var(--vert); }
.astuces .astuce { padding: 28px; border-top: 1px solid var(--filet); }
@media (min-width: 900px) { .astuces .astuce { border-top: 0; border-left: 1px solid var(--filet); } }
.astuces .astuce strong { display: block; font-size: 17.5px; letter-spacing: -.01em; margin-bottom: 6px; }
.astuces .astuce p { color: #4a4b50; font-size: 15.5px; }

/* le guide : image à gauche, texte à droite */
.guide-carte { display: grid; text-decoration: none; color: inherit; border: 1px solid var(--filet); margin-top: 48px; }
@media (min-width: 900px) { .guide-carte { grid-template-columns: 1.15fr 1fr; } }
.guide-carte .vue { position: relative; overflow: hidden; min-height: 280px; background: var(--orange) center / cover; }
.guide-carte .vue img { position: absolute; left: 8%; top: 12%; width: 100%; box-shadow: 0 30px 50px -22px rgba(22, 23, 26, .5); transition: transform .6s var(--ease); }
.guide-carte:hover .vue img { transform: translate(-10px, -6px); }
.guide-carte .texte { display: flex; flex-direction: column; gap: 14px; padding: clamp(28px, 3vw, 56px); justify-content: center; }

/* registre à flèches */
.registre { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--encre); }
.registre li { border-bottom: 1px solid var(--filet); }
.registre .rang { display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; padding: 26px 0; text-decoration: none; transition: padding .3s var(--ease), background .3s; }
@media (min-width: 900px) { .registre .rang { grid-template-columns: 60px minmax(240px, .8fr) 1.6fr auto; } }
.registre .ix { display: none; font-size: 13px; font-weight: 600; color: var(--gris); }
@media (min-width: 900px) { .registre .ix { display: block; } }
.registre .k { font-size: clamp(21px, 1.8vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.15; }
.registre .v { color: #4a4b50; grid-column: 1; }
@media (min-width: 900px) { .registre .v { grid-column: auto; } }
.registre .fl { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--filet-fort); color: var(--orange-t); transition: background .25s, color .25s, border-color .25s; grid-row: 1; grid-column: 2; }
@media (min-width: 900px) { .registre .fl { grid-column: 4; } }
.registre .fl svg { width: 14px; height: 14px; }
.registre a.rang:hover { padding-left: 16px; background: var(--doux); }
.registre a.rang:hover .fl { background: var(--orange); border-color: var(--orange); color: #fff; }

.lignes { list-style: none; margin: 44px 0 0; padding: 0; border-top: 1px solid var(--encre); }
.lignes li { display: grid; gap: 6px; padding: 24px 0; border-bottom: 1px solid var(--filet); }
@media (min-width: 900px) { .lignes li { grid-template-columns: 1fr 1.6fr; gap: 40px; } }
.lignes .k { font-weight: 600; font-size: 18.5px; letter-spacing: -.015em; }
.lignes .v { color: #4a4b50; }

/* le procédé : une règle, des jalons, de grands chiffres */
.procede { list-style: none; margin: 56px 0 0; padding: 0; display: grid; gap: 0; counter-reset: p; }
@media (min-width: 1020px) { .procede { grid-template-columns: repeat(var(--nb, 5), 1fr); } }
.procede li { position: relative; padding: 0 28px 28px 0; border-top: 2px solid var(--encre); counter-increment: p; }
@media (max-width: 1019px) { .procede li { padding: 0 0 28px; } }
.procede li::before { content: counter(p); display: block; font-size: clamp(64px, 6vw, 108px); font-weight: 300; letter-spacing: -.06em; line-height: 1; color: var(--orange); margin: 18px 0 14px; }
.procede li::after { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; background: var(--orange); }
.procede strong { display: block; font-size: 21px; letter-spacing: -.02em; margin-bottom: 8px; }
.procede span { color: #4a4b50; }

/* bandeau en dégradé, carte blanche à angles vifs posée dessus */
.bandeau .interieur { display: grid; gap: 32px; align-items: center; padding-block: clamp(48px, 6vw, 100px); }
@media (min-width: 1020px) { .bandeau .interieur { grid-template-columns: 1.15fr 1fr; gap: 5vw; } }
.posee { background: #fff; color: var(--encre); padding: clamp(24px, 2.6vw, 40px); display: grid; gap: 14px; }
.posee p, .posee .gris, .agenda p, .agenda .gris { color: #4a4b50; }

/* formulaire */
.inscription { display: flex; flex-wrap: wrap; }
.inscription input { flex: 1 1 220px; min-height: 52px; padding: 0 16px; border: 1px solid var(--filet-fort); border-right: 0; background: var(--papier); font: 400 16px var(--sans); color: var(--encre); }
.inscription input:focus { outline: 2px solid var(--orange); outline-offset: -2px; }
.inscription .btn { min-height: 52px; }
@media (max-width: 480px) { .inscription input { border-right: 1px solid var(--filet-fort); } .inscription .btn { margin-top: 8px; width: 100%; } .inscription .btn > span { flex: 1; } }
.message { margin-top: 12px; font-size: 14px; color: var(--gris); }
.message.ok { color: var(--vert-t); }

.vide { padding: 32px; border: 1px dashed var(--filet-fort); display: grid; gap: 10px; justify-items: start; }

/* onglets : soulignés, pas de pilule */
.onglets { display: flex; gap: 0; border-bottom: 1px solid var(--filet); flex-wrap: wrap; }
.onglets button { border: 0; background: none; padding: 16px 22px; font: 600 16px var(--sans); color: var(--gris); cursor: pointer; box-shadow: inset 0 -2px 0 transparent; transition: color .2s, box-shadow .2s; }
.onglets button:hover { color: var(--encre); }
.onglets button[aria-selected="true"] { color: var(--encre); box-shadow: inset 0 -3px 0 var(--orange); }
.onglets button[data-ancre="infra-brief"][aria-selected="true"] { box-shadow: inset 0 -3px 0 var(--vert); }
[role="tabpanel"] { margin-top: 40px; }
[role="tabpanel"][hidden] { display: none; }

/* carrousels */
.carrousels { display: grid; gap: 28px 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.carrousel { display: flex; flex-direction: column; gap: 12px; }
.carrousel .couv { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.carrousel .couv img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.carrousel:hover .couv img { transform: scale(1.03); }
.carrousel .titre { font-weight: 600; letter-spacing: -.015em; line-height: 1.25; }
.carrousel .liens { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; font-weight: 600; }
.carrousel .liens a { color: var(--orange-t); text-decoration: none; border-bottom: 1px solid currentColor; }
.carrousel .liens span { color: var(--gris); }

/* ------------------------------------------------------------------ Rejoindre : trois offres, chacune sa couleur */
.offres { display: grid; margin-top: 0; border-left: 1px solid var(--filet); border-top: 1px solid var(--filet); }
@media (min-width: 1020px) { .offres { grid-template-columns: repeat(3, 1fr); } }
.offre { display: flex; flex-direction: column; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); background: #fff; }
.offre .tete-offre { position: relative; min-height: 210px; background: center / cover no-repeat; color: #fff; padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.offre .tete-offre .t2 { font-size: clamp(30px, 2.6vw, 44px); max-width: 10ch; }
.offre .corps { display: flex; flex-direction: column; gap: 18px; padding: 28px; flex: 1; }
.offre .prix { font-size: 28px; font-weight: 700; letter-spacing: -.04em; line-height: 1.05; }
.offre .prix small { display: block; margin-top: 8px; font-size: 14.5px; font-weight: 400; color: var(--gris); letter-spacing: 0; }
.offre .boutons { margin-top: auto; padding-top: 8px; display: grid; }
.offre .btn > span { flex: 1; }

/* le badge-tampon qui tourne, ECTO au centre */
.tampon { position: absolute; right: 18px; bottom: 16px; width: 112px; height: 112px; }
.tampon .anneau { position: absolute; inset: 0; animation: tourne 18s linear infinite; }
.tampon .anneau text { font: 700 10.5px var(--sans); letter-spacing: .22em; fill: #fff; text-transform: uppercase; }
.tampon > svg.ecto { position: absolute; inset: 30%; width: 40%; height: 40%; color: var(--orange); }
.tampon.bleu > svg.ecto { color: #fff; }
@keyframes tourne { to { transform: rotate(360deg); } }
.offre:hover .tampon .anneau { animation-duration: 6s; }

.coches { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.coches li { position: relative; padding-left: 32px; font-size: 16px; line-height: 1.5; color: #3f4045; }
.coches li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--vert); }
.coches li::after { content: ""; position: absolute; left: 7px; top: 5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* questions */
.questions { margin-top: 40px; border-top: 1px solid var(--encre); }
.questions details { border-bottom: 1px solid var(--filet); }
.questions summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; font-size: 19px; font-weight: 600; letter-spacing: -.015em; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: ""; flex-shrink: 0; width: 36px; height: 36px; border: 1px solid var(--filet-fort);
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23d94a00' stroke-width='1.6'/%3E%3C/svg%3E") center / 12px no-repeat;
        transition: transform .3s var(--ease), background-color .3s; }
.questions details[open] summary::after { transform: rotate(45deg); background-color: var(--orange-clair); }
.questions details p { padding: 0 0 24px; color: #4a4b50; max-width: 70ch; }

/* ------------------------------------------------------------------ page de vente */
.vente .interieur { display: grid; gap: 40px; padding-block: clamp(48px, 6vw, 96px); }
@media (min-width: 1020px) { .vente .interieur { grid-template-columns: 1.05fr 1fr; gap: 5vw; align-items: start; } }
.vente .prix-grand { margin-top: 32px; font-size: clamp(36px, 3.4vw, 56px); font-weight: 700; letter-spacing: -.05em; line-height: 1; }
.vente .prix-grand small { display: block; margin-top: 10px; font-size: 15px; font-weight: 400; letter-spacing: 0; color: rgba(255, 255, 255, .88); }
.agenda { background: #fff; color: var(--encre); padding: clamp(24px, 3vw, 44px); display: grid; gap: 16px; justify-items: start; }
.agenda .quadrillage { width: 100%; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--filet); border-left: 1px solid var(--filet); }
.agenda .quadrillage span { aspect-ratio: 1; border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); display: grid; place-items: center; font-size: 13px; color: #b9b8b2; }
.agenda .quadrillage span.jour { color: var(--gris); font-weight: 600; font-size: 11.5px; letter-spacing: .06em; aspect-ratio: auto; padding: 8px 0; }
.inclus { display: grid; border: 1px solid var(--filet); }
@media (min-width: 900px) { .inclus { grid-template-columns: 1fr 1.2fr; } }
.inclus .bande { min-height: 240px; position: relative; background: center / cover no-repeat; overflow: hidden; }
.inclus .bande i { position: absolute; inset: 0; background: #fff; opacity: .9; -webkit-mask: var(--m) center / cover no-repeat; mask: var(--m) center / cover no-repeat; }
.inclus .corps { padding: clamp(28px, 3vw, 48px); display: grid; gap: 18px; align-content: center; }

/* Entreprises */
.manifeste { display: grid; gap: 32px; }
@media (min-width: 1020px) { .manifeste { grid-template-columns: 1fr 1fr; gap: 6vw; align-items: start; } }
.manifeste .grand { font-size: clamp(28px, 2.8vw, 46px); line-height: 1.15; letter-spacing: -.035em; font-weight: 600; }
.manifeste .texte { display: grid; gap: 18px; color: #3f4045; font-size: 18px; }
.personnes { display: grid; margin-top: 44px; border-top: 1px solid var(--filet); border-left: 1px solid var(--filet); }
@media (min-width: 760px) { .personnes { grid-template-columns: 1fr 1fr; } }
.personnes > * { border-right: 1px solid var(--filet); border-bottom: 1px solid var(--filet); }

/* contact */
.champs { display: grid; gap: 18px; margin-top: 28px; }
@media (min-width: 700px) { .champs { grid-template-columns: 1fr 1fr; } .champs .plein-large { grid-column: 1 / -1; } }
.champ { display: grid; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--gris); }
.champ input, .champ textarea, .champ select { width: 100%; padding: 14px 0; border: 0; border-bottom: 1px solid var(--filet-fort); background: transparent;
        font: 400 17px/1.4 var(--sans); letter-spacing: 0; text-transform: none; color: var(--encre); -webkit-appearance: none; appearance: none; }
.champ textarea { min-height: 130px; resize: vertical; }
.champ :is(input, textarea, select):focus { outline: 0; border-bottom: 2px solid var(--orange); }

/* ------------------------------------------------------------------ pied de page gravé */
.pied-site { margin-top: clamp(110px, 12vw, 200px); position: relative; color: #fff; }
.pied-site .frise { display: block; width: 100%; aspect-ratio: 2800 / 760; background: url(../../images/frises/frise-pied-de-page.png) center bottom / 100% auto no-repeat; margin-bottom: -2px; position: relative; z-index: 2; }
@media (max-width: 700px) { .pied-site .frise { aspect-ratio: 1000 / 620; background-image: url(../../images/frises/frise-pied-de-page-mobile.png); } }
.pied-site .fond { position: relative; margin-top: calc(-1 * clamp(80px, 12vw, 210px)); padding: calc(clamp(80px, 12vw, 210px) + 40px) 0 44px;
                   background: #ff6a00 url(../../images/fonds/fond-orange-halo.jpg) center / cover no-repeat; }
.pied-site .appel { display: grid; gap: 28px; align-items: end; padding-bottom: 56px; border-bottom: 1px solid rgba(255, 255, 255, .4); }
@media (min-width: 1020px) { .pied-site .appel { grid-template-columns: 1.3fr 1fr; } .pied-site .appel .boutons { justify-content: flex-end; } }
.pied-site .appel .t2 { max-width: 15ch; }
.pied-site .colonnes { display: grid; gap: 40px; padding-top: 52px; }
@media (min-width: 1020px) { .pied-site .colonnes { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 4vw; } }
.pied-site h3 { font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .8); margin-bottom: 16px; }
.pied-site ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.pied-site a { color: #fff; text-decoration: none; }
.pied-site a:hover { text-decoration: underline; text-underline-offset: .22em; }
.pied-site .bas { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 56px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .4); font-size: 14px; color: rgba(255, 255, 255, .88); }
.pied-site .inscription input { border-color: #fff; }
.pied-site .inscription .btn.blanc { border: 1px solid #fff; border-left: 1px solid var(--filet); }
.pied-site .message { color: rgba(255, 255, 255, .88); }
.pied-site .message.ok { color: #fff; }

/* ------------------------------------------------------------------ apparition douce, sous la ligne de flottaison */
[data-apparait] { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
[data-apparait].vu { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-apparait] { opacity: 1; transform: none; transition: none; }
  .tampon .anneau, .vitrine .cadre .g { animation: none; transition: none; }
}

/* ------------------------------------------------------------------ ECTO vivant (../../assets/ecto-site.js) */
.ecto-couche { position: absolute; z-index: 4; opacity: 0; transition: opacity .2s linear; pointer-events: none; overflow: hidden; }
.ecto-couche.est-la { opacity: 1; }
/* IS-199 : pas de `color-scheme` ici. Safari peint alors le fond du cadre avec la couleur par défaut du
   thème (blanc) au lieu de le laisser transparent : la mascotte apparaissait dans un carré blanc qui
   masquait le texte (iPhone, 19/09/2026). Le document du cadre se met lui-même en clair (mode « nu »). */
.ecto-couche .ecto { display: block; border: 0; background: transparent; }
[data-ecto-slot].ecto-occupe { visibility: hidden; }
[data-ecto-clic].saute svg.ecto-pose, [data-ecto-clic].saute .ecto-grand { animation: saute .55s var(--ease); }
@keyframes saute { 30% { transform: translateY(-14px) scale(1.04, .97); } 60% { transform: translateY(2px) scale(.98, 1.03); } }

/* ==================================================================== v6 : corrections après revue du 17/09
   Les angles vifs restent la règle ; l'arrondi revient à des endroits précis (la carte du fil, les cartes posées).
   Plus de tirets devant les étiquettes : la flèche « oreille » de l'ADN les remplace là où elle a un sens.
   Plus de cartouche blanc en haut des ouvertures. */

.saut { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; left: auto; }
a.saut:focus { width: auto; height: auto; margin: 0; clip-path: none; left: 12px; top: 12px; z-index: 99; background: var(--papier); padding: 8px 12px; }

.sur::before { content: none; }
.etiquette::before { content: ""; width: 24px; height: 8px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 13'%3E%3Cpath d='M0 6.5h40' stroke='black' stroke-width='2.2' fill='none'/%3E%3Cpath d='M27 1 L41 6.5 L31 11.5' stroke='black' stroke-width='2.2' stroke-linecap='square' fill='none'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 13'%3E%3Cpath d='M0 6.5h40' stroke='black' stroke-width='2.2' fill='none'/%3E%3Cpath d='M27 1 L41 6.5 L31 11.5' stroke='black' stroke-width='2.2' stroke-linecap='square' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; }
.sur { font-size: 13px; }
.ouverture .t1, .tete-page .t1 { margin-top: 0; }

/* ------------------------------------------------------------------ le fil sous ECTO : carte arrondie, posée en biais */
.fil .pile { border-radius: 18px; transform: rotate(-2.2deg); box-shadow: 0 30px 60px -30px rgba(22, 23, 26, .55); overflow: hidden; transition: transform .5s var(--ease); }
.fil:hover .pile { transform: rotate(0deg) translateY(-3px); }
.fil .pile.reperes::after { content: none; }
.fil .sortie img { border-radius: 8px; }
.fil .barre { margin-top: 22px; }

/* ------------------------------------------------------------------ cartes posées : arrondies */
.posee { border-radius: 18px; box-shadow: 0 30px 60px -32px rgba(22, 23, 26, .5); }
.posee.reperes::after { content: none; }
.posee .ecto-pose-haut { position: absolute; right: 28px; top: -58px; width: 96px; }
.posee { position: relative; }

/* ------------------------------------------------------------------ ouvertures avec une vraie photo fondue dans le dégradé, à droite */
.tete-page .panneau, .ouverture .panneau { isolation: isolate; }
.panneau .photo { position: absolute; inset: 0 0 0 auto; width: min(64%, 1200px); z-index: -1; background: center / cover no-repeat;
  filter: grayscale(1) contrast(1.15) brightness(1.05); mix-blend-mode: luminosity; opacity: .95;
  -webkit-mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%); mask: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.35) 22%, #000 55%); }
@media (max-width: 1019px) { .panneau .photo { width: 100%; opacity: .45; -webkit-mask: linear-gradient(180deg, transparent 20%, #000 90%); mask: linear-gradient(180deg, transparent 20%, #000 90%); } }
.tete-page .interieur { min-height: min(76vh, 760px); }
.scene-photo { position: relative; align-self: stretch; min-height: 320px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.scene-photo > svg.ecto-pose { position: absolute; width: clamp(130px, 13vw, 220px); height: auto; color: var(--orange);
  left: var(--ex, 55%); top: var(--ey, 55%); transform: translate(-50%, -50%); }
.scene-photo .ombre { position: absolute; left: var(--ex, 55%); top: calc(var(--ey, 55%) + clamp(56px, 5.6vw, 96px)); width: clamp(110px, 11vw, 190px); height: 18px;
  transform: translateX(-50%); background: radial-gradient(closest-side, rgba(22,23,26,.35), transparent); filter: blur(2px); }
@media (max-width: 1019px) { .scene-photo { min-height: 260px; } }

/* ------------------------------------------------------------------ trois portes : dégradé de couleur et gravure blanche */
.case .gravure.degrade { background: center / cover no-repeat; }
.case .gravure.degrade i { background-color: #fff; opacity: .92; }

/* ------------------------------------------------------------------ ECTO en scène */
.ecto-scene { position: absolute; pointer-events: none; height: auto; }
.procede-bloc { position: relative; }
.procede-bloc .fin-ecto { position: absolute; right: 0; top: -60px; width: 120px; }
@media (max-width: 1019px) { .procede-bloc .fin-ecto { position: static; display: block; margin: 0 0 0 auto; width: 110px; } }
.personnes { position: relative; }
.guette { position: absolute; z-index: 2; width: 110px; right: 8%; top: -80px; }

/* ------------------------------------------------------------------ tampon métal de la Society */
.tete-offre.society { background-position: center; }
.tampon.metal { width: 132px; height: 132px; right: 16px; bottom: 12px; }
.tampon.metal .medaille { position: absolute; inset: 22%; border-radius: 50%; overflow: hidden; background: #f6f7f2; box-shadow: 0 10px 24px -10px rgba(22,23,26,.5), inset 0 0 0 1px rgba(255,255,255,.6); }
.tampon.metal .medaille video { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.12); }
.tampon.metal .anneau text { font-size: 10px; letter-spacing: .24em; }

/* ==================================================================== v7 */

/* le tiret « oreilles » : le haut d'ECTO, tel qu'il est posé sur « Infra » dans le logo texte */
.etiquette::before { width: 26px; height: 10px;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='90 14 67 25'%3E%3Cpath d='M123.527 30L93 17L97.5 35L149 35.5L153.5 25L123.527 17V30Z' fill='black' stroke='black' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='90 14 67 25'%3E%3Cpath d='M123.527 30L93 17L97.5 35L149 35.5L153.5 25L123.527 17V30Z' fill='black' stroke='black' stroke-width='3' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat; }

/* le fil d'accueil sans barre */
.fil .pile { margin-bottom: 8px; }

/* ------------------------------------------------------------------ ECTO dans les cartes du problème */
.case.avec-pose { overflow: hidden; min-height: 230px; padding-right: 150px; }
@media (max-width: 759px) { .case.avec-pose { padding-right: clamp(24px, 2.4vw, 40px); padding-bottom: 120px; } }
.pose-carte { position: absolute; right: 18px; bottom: -150px; width: 120px; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); }
.case.avec-pose.vu .pose-carte { transform: translateY(-150px); transition-delay: calc(var(--i, 0) * 250ms + 400ms); }
.case.avec-pose.vu .pose-carte { animation: flotte 3.6s ease-in-out calc(var(--i, 0) * 250ms + 1.4s) infinite; }
.case.avec-pose:hover .pose-carte { animation-duration: 1.2s; }
@keyframes flotte { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }

/* ------------------------------------------------------------------ offres de l'accueil, comme sur Rejoindre */
.offre-lien { padding: 0 !important; }
.offre-lien > p, .offre-lien > .pied { margin-inline: clamp(24px, 2.4vw, 40px); }
.offre-lien > p { margin-top: 6px; }
.offre-lien > .pied { margin-bottom: clamp(24px, 2.4vw, 40px); }
.offre-lien .tete-offre { position: relative; min-height: 220px; background: center / cover no-repeat; color: #fff; padding: 26px 28px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.offre-lien .tete-offre .t2 { font-size: clamp(30px, 2.6vw, 44px); max-width: 11ch; }
.tampon > svg.ecto { inset: 24%; width: 52%; height: 52%; }
.tampon { width: 124px; height: 124px; }

/* le tampon de la Society : ECTO en métal, transparent, qui tourne dans son anneau */
.tampon.metal { width: 150px; height: 150px; }
.tampon.metal .metal-tourne { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: contain; filter: drop-shadow(0 8px 14px rgba(22, 23, 26, .35)); }

/* ------------------------------------------------------------------ scènes animées des ouvertures */
.scene-photo > svg.ecto-pose { width: clamp(150px, 15vw, 250px); }
.scene-photo .decor { position: absolute; inset: 0; pointer-events: none; }
.scene-photo .acteur { position: absolute; left: 0; top: 0; width: clamp(56px, 5.4vw, 90px); height: auto; will-change: transform, opacity; }
body.mise-en-scene .ecto-couche { opacity: 0 !important; transition: opacity .25s; }
body.mise-en-scene .scene-photo > svg.ecto-pose { visibility: hidden !important; }

/* les fiches de la Bibliothèque */
.scene-photo .fiche { position: absolute; width: clamp(90px, 8vw, 140px); aspect-ratio: 4 / 5; background: #fff center / cover no-repeat; border-radius: 10px;
  box-shadow: 0 18px 30px -16px rgba(22, 23, 26, .55); will-change: transform, opacity; }

/* les marches de Rejoindre */
.scene-photo .marche { position: absolute; height: 10px; width: clamp(110px, 10vw, 170px); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 24px -12px rgba(22, 23, 26, .5); transform: translate(-50%, 0); opacity: 0; transition: opacity .5s; }
.scene-photo.pret .marche { opacity: 1; }

/* ------------------------------------------------------------------ deux ECTO qui échangent */
.echange-bloc { display: grid; gap: 28px; justify-items: start; }
.echange { display: flex; gap: clamp(28px, 5vw, 90px); align-items: flex-end; padding-top: 70px; }
.parleur { position: relative; width: clamp(110px, 10vw, 160px); }
.parleur svg { display: block; width: 100%; height: auto; color: var(--orange); transform-origin: 50% 100%; }
.parleur.droite svg { color: #1c26b8; }
.parleur .bulle { position: absolute; bottom: 100%; margin-bottom: 14px; display: flex; gap: 6px; padding: 12px 16px; background: #fff; border-radius: 16px; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .3s, transform .3s; }
.parleur.gauche .bulle { left: 30%; border-bottom-left-radius: 3px; }
.parleur.droite .bulle { right: 30%; border-bottom-right-radius: 3px; }
.parleur .bulle i { width: 8px; height: 8px; border-radius: 50%; background: var(--orange); animation: point 1s infinite; }
.parleur.droite .bulle i { background: #4a3fe0; }
.parleur .bulle i:nth-child(2) { animation-delay: .15s; } .parleur .bulle i:nth-child(3) { animation-delay: .3s; }
@keyframes point { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
.echange .parle .bulle { opacity: 1; transform: none; }
.echange .parle svg { animation: parle .5s ease-in-out infinite; }
@keyframes parle { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .95); } }
@media (prefers-reduced-motion: reduce) { .echange .parle svg, .parleur .bulle i, .pose-carte { animation: none !important; } }

/* ------------------------------------------------------------------ le procédé se dessine au défilement, ECTO en bout de ligne */
.procede li { border-top: 0; }
.procede .jalon .trait { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--encre); transform-origin: left; }
.procede li::after { z-index: 1; }
.procede-bloc { display: grid; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1020px) { .procede-bloc { grid-template-columns: 1fr auto; } .procede-bloc .procede { margin-top: 56px; } }
.procede-bloc .fin-ecto { position: static; width: 120px; margin-top: 0; align-self: start; transform: translateY(calc(56px - 100% + 6px)); }
@media (max-width: 1019px) { .procede-bloc .fin-ecto { transform: none; margin: 8px 0 0 auto; } }
[data-sequence] .jalon { opacity: 1; transform: none; }
[data-sequence] .jalon .trait { transform: scaleX(0); transition: transform .55s ease calc(var(--i) * 420ms); }
[data-sequence] .jalon::before, [data-sequence] .jalon > strong, [data-sequence] .jalon > span:not(.trait), [data-sequence] .jalon::after { opacity: 0; transition: opacity .45s ease calc(var(--i) * 420ms + 300ms); }
[data-sequence].vu .jalon .trait { transform: scaleX(1); }
[data-sequence].vu .jalon::before, [data-sequence].vu .jalon > strong, [data-sequence].vu .jalon > span:not(.trait), [data-sequence].vu .jalon::after { opacity: 1; }
[data-sequence] .fin-ecto { transform-origin: 50% 100%; }
[data-sequence].fini .fin-ecto { animation: rebond .7s cubic-bezier(.3, 1.4, .5, 1) 3; }
@keyframes rebond { 0% { translate: 0 0; scale: 1 1; } 25% { translate: 0 -34px; scale: .96 1.05; } 55% { translate: 0 0; scale: 1.08 .9; } 75% { translate: 0 -8px; scale: 1 1; } 100% { translate: 0 0; scale: 1 1; } }

/* ------------------------------------------------------------------ portraits */
.portraits { display: grid; gap: 32px; margin-top: 44px; }
@media (min-width: 760px) { .portraits { grid-template-columns: 1fr 1fr; gap: 4vw; } }
.personne { display: grid; gap: 8px; }
.personne .portrait { position: relative; aspect-ratio: 1; max-width: 360px; border: 1px dashed var(--filet-fort); background: var(--doux); display: grid; place-items: center; margin-bottom: 14px; }
.personne .portrait > span { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gris); }
.personne .pose-portrait { position: absolute; right: -28px; bottom: -22px; width: clamp(90px, 8vw, 130px); }
.personne p { color: #4a4b50; }

/* message quand la version anglaise n'est pas prête */
.toast { position: fixed; left: 50%; bottom: 28px; z-index: 80; transform: translate(-50%, 20px); opacity: 0; background: #fff; color: var(--encre);
  padding: 14px 20px; border-radius: 12px; box-shadow: 0 20px 40px -18px rgba(22, 23, 26, .45); font-weight: 500; transition: opacity .3s, transform .3s; pointer-events: none; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
.langues span { cursor: pointer; }

/* ==================================================================== v7.1 (retours du 17/09, 01:15) */

/* couleurs d'univers dans les portes */
.etiquette.bleu, .lien.bleu { color: #2436e0; }
.lien.vert { color: var(--vert-t); }

/* le vivant d'ECTO qui éclot à la fin d'une mise en scène */
.ecto-couche.eclot { animation: eclot .75s cubic-bezier(.2, 1.5, .4, 1) both; transform-origin: 50% 60%; }
@keyframes eclot { 0% { scale: .2; opacity: 0; } 45% { opacity: 1; } 70% { scale: 1.12; } 100% { scale: 1; opacity: 1; } }
body.mise-en-scene .ecto-couche { transition: none; }

/* bloc « introduction à l'IA » : l'ECTO en métal de la Society */
.metal-bloc { width: clamp(120px, 11vw, 180px); margin-top: auto; align-self: flex-end; filter: drop-shadow(0 16px 24px rgba(22, 23, 26, .35)); }

/* ------------------------------------------------------------------ le procédé : ECTO est l'arrivée de la ligne */
@media (min-width: 1020px) {
  .procede-bloc { display: block; }
  .procede-bloc .procede { margin-top: 110px; grid-template-columns: repeat(var(--nb, 5), 1fr) 150px; }
}
.procede .arrivee { padding: 0; }
.procede .arrivee::before, .procede .arrivee::after { content: none; }
.procede .arrivee .fin-ecto { position: absolute; left: 14px; bottom: calc(100% - 3px); width: 124px; height: auto; transform: none; opacity: 0; transform-origin: 50% 100%; transition: opacity .4s ease calc(var(--i) * 420ms + 200ms); cursor: pointer; }
[data-sequence].vu .arrivee .fin-ecto { opacity: 1; }
.procede .arrivee .trait::after { content: ""; position: absolute; right: -1px; top: -6px; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); }
@media (max-width: 1019px) {
  .procede .arrivee { height: 130px; }
  .procede .arrivee .fin-ecto { left: 0; bottom: 8px; }
  .procede .arrivee .trait { display: none; }
}
[data-sequence].fini .arrivee .fin-ecto { animation: rebond .8s cubic-bezier(.33, 0, .2, 1) 3; }
@keyframes rebond {
  0%   { translate: 0 0;     scale: 1 1; }
  12%  { translate: 0 0;     scale: 1.1 .9; }
  40%  { translate: 0 -46px; scale: .95 1.06; }
  60%  { translate: 0 -46px; scale: 1 1; }
  86%  { translate: 0 0;     scale: 1.12 .88; }
  100% { translate: 0 0;     scale: 1 1; }
}
[data-sequence] .jalon .trait { transition-timing-function: cubic-bezier(.65, 0, .35, 1); }

/* ------------------------------------------------------------------ Bibliothèque : les fiches se rangent sous ECTO, cliquables */
.scene-photo .fiche { pointer-events: auto; cursor: pointer; opacity: 0; }
.scene-photo .fiche:hover { z-index: 5; }
.scene-photo .fiche .nom { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-size: 12px; font-weight: 600; color: #fff; opacity: 0; transition: opacity .25s; white-space: nowrap; }
.scene-photo .fiche:hover .nom { opacity: 1; }

/* ------------------------------------------------------------------ Rejoindre : trois blocs de couleur, ECTO les franchit */
.scene-photo .bloc { position: absolute; bottom: 0; width: clamp(88px, 8.4vw, 140px); transform-origin: 50% 100%; border-radius: 10px 10px 0 0; background: center / cover no-repeat;
  box-shadow: 0 20px 40px -20px rgba(22, 23, 26, .55), inset 0 1px 0 rgba(255, 255, 255, .5); display: grid; align-content: start; justify-items: center; padding-top: 12px;
  color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }

/* ------------------------------------------------------------------ l'échange : plus grand, recadré, bouton centré */
.bandeau .echange-bloc { justify-items: center; gap: 36px; }
.echange { gap: clamp(36px, 6vw, 110px); padding-top: 90px; }
.parleur { width: clamp(140px, 13vw, 210px); }
.parleur .ecto-vif { display: block; width: 100%; height: auto; color: var(--orange); overflow: visible; transform-origin: 50% 100%; }
.parleur.droite .ecto-vif { color: #1c26b8; }
.parleur .yeux { transition: transform .45s cubic-bezier(.3, .7, .3, 1); }
.parleur .oeil { transform-box: fill-box; transform-origin: center; transition: transform .12s ease; }
.parleur.cligne .oeil { transform: scaleY(.1); }
.echange .parle .ecto-vif { animation: parle .9s ease-in-out infinite; }
@keyframes parle { 0%, 100% { transform: scale(1, 1) rotate(0); } 30% { transform: scale(1.03, .96) rotate(-1.5deg); } 65% { transform: scale(.98, 1.03) rotate(1deg); } }

/* ------------------------------------------------------------------ portraits de l'équipe */
.fde { margin-top: 20px; max-width: 64ch; }
.fde em { font-style: normal; font-weight: 600; color: var(--encre); }
.portraits { margin-top: 48px; }
.personne .portrait { aspect-ratio: 4 / 5; max-width: 420px; border: 0; background-size: cover; overflow: visible; display: block; margin-bottom: 20px; }
.personne .portrait > span { display: none; }
.personne .photo-personne { position: absolute; left: 50%; bottom: 0; width: 88%; height: 92%; object-fit: contain; object-position: bottom; transform: translateX(-50%); filter: drop-shadow(0 20px 30px rgba(22, 23, 26, .25)); }
.personne .pose-portrait { right: -34px; bottom: 26px; width: clamp(90px, 7vw, 120px); }
.personne .etiquette { margin-top: 2px; }
.personne p { max-width: 44ch; }

.parleur .bulle { box-shadow: 0 10px 24px -10px rgba(22, 23, 26, .45); }

/* ==================================================================== v7.2 (retours du 17/09, 01:35) */

/* la frise : jalons centrés sur la ligne, ECTO argenté termine la ligne */
.procede li::after { top: -5px; }
.procede .arrivee .trait { right: auto; width: 34px; }
.procede .arrivee .trait::after { content: none; }
.procede .arrivee .fin-ecto { left: 18px; top: -64px; bottom: auto; width: 128px; z-index: 2; }
@media (max-width: 1019px) { .procede .arrivee .fin-ecto { top: auto; bottom: 8px; left: 0; } }

/* violet de la page Contact */
.etiquette.violet, .sur.violet { color: #5b4ce0; }

/* l'équipe : photo carrée à gauche, texte à droite, ECTO en haut à droite */
.fde { max-width: 900px; }
.fde .chapeau { max-width: 70ch; margin-top: 18px; }
.portraits { display: grid; gap: 48px 4vw; margin-top: 56px; }
@media (min-width: 1200px) { .portraits { grid-template-columns: 1fr 1fr; } }
.personne { grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 640px) { .personne { grid-template-columns: minmax(200px, 300px) 1fr; } }
.personne .portrait { aspect-ratio: 1; max-width: 300px; width: 100%; margin: 0; }
.personne .photo-personne { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; filter: none; }
.personne .pose-portrait { top: -30px; right: -30px; bottom: auto; width: clamp(80px, 6vw, 104px); }
.personne .bio { display: grid; gap: 10px; align-content: start; padding-top: 6px; }
.personne .bio p { color: #4a4b50; max-width: 52ch; }
.personne .bio .t3 { font-size: clamp(24px, 2vw, 32px); }

/* l'ECTO aux yeux qui tournent, le temps d'une éclosion */
.scene-photo .ecto-helice { position: absolute; z-index: 3; overflow: visible; color: var(--orange); transform-origin: 50% 70%; }
.scene-photo .ecto-helice .yeux { transform-box: view-box; transform-origin: 98.1px 54.07px; }
.personne { gap: 40px; }
.personne .pose-portrait { top: -34px; right: 14px; width: clamp(78px, 5.4vw, 96px); }
.procede .arrivee .trait { width: 82px; }

/* ==================================================================== v7.3 (retours du 17/09, 01:45) */

/* Society : à la fin du rassemblement, ECTO devient le logo argenté */
.scene-photo .ecto-argent { position: absolute; left: var(--ex); top: var(--ey); width: clamp(170px, 17vw, 280px); height: auto; transform: translate(-50%, -52%);
  opacity: 0; pointer-events: none; z-index: 3; }
.scene-photo.argente .ecto-argent { opacity: 1; pointer-events: auto; cursor: pointer; }
body.argente .ecto-couche, body.acteur-final .ecto-couche { opacity: 0 !important; transition: none; }
body.argente .scene-photo > svg.ecto-pose, body.acteur-final .scene-photo > svg.ecto-pose { visibility: hidden !important; }

/* la frise : le logo argenté éclot au bout de la ligne */
[data-sequence].vu .arrivee .fin-ecto { animation: pop-fin .8s cubic-bezier(.2, 1.5, .4, 1) calc(var(--i) * 420ms + 150ms) both; }
@keyframes pop-fin { 0% { opacity: 0; scale: .2; } 60% { opacity: 1; scale: 1.15; } 100% { opacity: 1; scale: 1; } }
[data-sequence].vu.fini .arrivee .fin-ecto { animation: rebond .8s cubic-bezier(.33, 0, .2, 1) 3; opacity: 1; }

/* l'équipe : ECTO sur la droite, les têtes entières */
.personne { position: relative; }
.personne .pose-portrait { position: absolute; top: -8px; right: 0; left: auto; bottom: auto; width: clamp(72px, 5vw, 92px); }
.personne .bio { padding-right: clamp(80px, 6vw, 110px); }
.personne .photo-personne { left: 50%; bottom: 0; top: auto; width: auto; height: 94%; max-width: 100%; object-fit: contain; object-position: bottom; transform: translateX(-50%); }

/* v7.4 : ECTO en bas à droite du texte, pour laisser la place au texte */
.personne .pose-portrait { top: auto; bottom: -6px; right: 0; }
.personne .bio { padding-right: 0; padding-bottom: 70px; }
@media (min-width: 640px) { .personne .bio { min-height: 100%; } }

/* v7.5 : le logo de fin de frise reste caché tant que la frise ne s'est pas dessinée */
.procede .arrivee .fin-ecto { visibility: hidden; }
[data-sequence].vu .arrivee .fin-ecto { visibility: visible; }

/* Page des mentions légales : du texte long, lisible et imprimable. Tout est porté par .legal,
   pour qu'aucune autre page ne bouge. */
.legal { padding-top: clamp(56px, 6vw, 96px); }
.legal .t3 { padding-bottom: 14px; border-bottom: 1px solid var(--encre); }
.legal h3 { margin: 32px 0 10px; font-size: 18.5px; font-weight: 600; letter-spacing: -.015em; }
.legal p, .legal li { max-width: 74ch; color: #3f4045; }
.legal p { margin: 0 0 14px; }
.legal ul { margin: 0 0 14px; padding-left: 22px; }
.legal li { margin-bottom: 10px; }
.legal a { color: var(--orange-t); text-underline-offset: 3px; }
.legal .gris { color: var(--gris); }
.legal code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; background: var(--doux);
  padding: 2px 6px; border-radius: 4px; }
.legal .tableau { margin: 6px 0 20px; overflow-x: auto; }
.legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 15.5px; }
.legal th, .legal td { text-align: left; vertical-align: top; padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--filet); color: #3f4045; }
.legal th { font-weight: 600; color: var(--encre); border-bottom-color: var(--filet-fort); }
.legal td:last-child, .legal th:last-child { padding-right: 0; }
.lignes .k a { color: inherit; }
.lignes .k a:hover { color: var(--orange-t); }